/*
    This file is part of darktable,
    copyright (c) 2022 darktable developers.

    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_38 #595959;
@define-color grey_40 #5e5e5e;
@define-color grey_42 #636363;
@define-color grey_44 #686868;
@define-color grey_45 #6a6a6a;
@define-color grey_46 #6d6d6d;
@define-color grey_48 #727272;
@define-color grey_50 #777777;
@define-color grey_52 #7c7c7c;
@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.
***/

/*** Naming class and ids:
  - classes should be named with underscores, starting by dt_ then what class does (main function). See below.
  Note that some remains with hyphens, they are Gtk ones and can't be changed. It's so also a good way to distinguish Gtk classes to darktable classes.
  - ids will be used with hyphens, with so item part name (for exemple: bauhaus-slider)
Why that? Just because it's a developer choice and most classes use underscore in code and id use hyphens. So make it easy and, more important, consistent to avoid being confused and make mistake that would cause bug just by wrong typing.
***/

/*** Using classes and ids :

  * classes are used to set same settings for multiples and differents widgets in the UI.
  * ids are used to set a name to a specific widget and so allow to set CSS for this widget
  * some classes had been set on darktable, they all began with a dot. Before adding classes or ids, check what exist before

  * on those classes, some general ones had been set and should be added to your widget on Gtk code:
  - dt_transparent_background:
      - use it on a widget to set transparent background (except on hover) and no border
  - dt_no_hover:
      - don't change css on hover (for dt_module_btn)
      - ex : colorlabels on header/footer bar
  - dt_ignore_fg_state:
      - don't change foreground color on state change and don't use bg if checked
      - ex : polarity buttons in blending ui
  - dt_module_btn:
      - set for all icons (button widget without text on it)
      - ex : btn in module header
      - for toggle button this is combined with a "standard" "toggle" class
  - dt_big_btn_canvas:
      - use it for some buttons that need to have bigger margin on button-canvas
  - dt_dimmed:
      - set all icons that need to be dimmed by default (typed text in search box when checking results and color labels icons)
  - dt_section_expander:
      - use it for all expanders you could add on a module
  - dt_section_label:
      - use it for section label text (titles in modules or some popover like overlays or guides lines ones). This set mainly whiter text and bottom-border line
  - dt_monospace:
      - set monospace font for some specific items (on some tooltips, history number or colorpicker values...)
  - dt_warning:
      - set all warnings messages inside panels, like deprecated modules messages or warning we could see when having white balance applied twice with color calibration and white balance modules
  - dt_bauhaus:
      - use it to set same settings on all bauhaus (sliders and combobox)
  - dt_bauhaus_alignment:
      - used for icons that needs to be aligned with bauhaus widgets in libs
      - ex : color picker for auto-tune setting in filmic or mask on same module and tone equalizer
  - dt_bauhaus_popup:
      - used for all bauhaus popup
  - dt_spacing_sw:
      - use it if spacing needed around some treeview (actually used in collections and tagging modules to have spacing on top and bottom margin regarding buttons/entries around

  * the list above is not exhausting. Those are main ones set actually and should be completed if needed. You could see other classes on this file
***/

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

/* General */
@define-color selected_bg_color @grey_55;       /* legacy stuff */
@define-color border_color @grey_40;            /* border, when used */
@define-color bg_color @grey_44;                /* general background */
@define-color fg_color @grey_95;                /* general text */
@define-color base_color @fg_color;             /* legacy stuff */
@define-color text_color @grey_35;              /* same */
@define-color placeholder_text_color @grey_70;  /* placeholder text color (text on search background fields) */
@define-color disabled_fg_color @grey_65;       /* disabled controls */

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

/* Modules box (plugins) */
@define-color plugin_bg_color @grey_48;
@define-color section_label @grey_95;
@define-color plugin_label_color @grey_95;
@define-color collapsible_bg_color @grey_55;

/* Modules controls (sliders and comboboxes) */
@define-color bauhaus_bg alpha(@grey_10, 0.10);
@define-color bauhaus_fg shade(@fg_color, 0.95);   /* needed to show color picker on bauhaus sliders */
@define-color bauhaus_border @grey_40;
@define-color bauhaus_indicator_border @grey_50;
@define-color bauhaus_fill @grey_70;
@define-color bauhaus_bg_hover @grey_80;
@define-color bauhaus_fg_hover @grey_100;
@define-color bauhaus_fg_selected @grey_75;
@define-color bauhaus_fg_insensitive alpha(@bauhaus_fg, 0.5);

/* GTK Buttons and tabs */
@define-color button_bg @grey_55;
@define-color button_fg alpha(@fg_color, 0.55);
@define-color button_border shade(@button_bg, 1.04);
@define-color button_hover_bg @grey_70;
@define-color button_hover_fg @grey_30;

/* text fields */
@define-color field_bg @grey_45;
@define-color field_fg @fg_color;
@define-color field_active_bg @grey_55;
@define-color field_active_fg @grey_95;
@define-color field_selected_bg @grey_65;
@define-color field_selected_fg @grey_100;
@define-color field_hover_bg @grey_75;
@define-color field_hover_fg @grey_35;

/* Tooltips and contextual helpers */
@define-color tooltip_bg_color @grey_25;
@define-color tooltip_fg_color @grey_80;
@define-color really_dark_bg_color @grey_05;
@define-color log_fg_color @grey_95;

/* Views */
@define-color darkroom_bg_color @grey_50;
@define-color darkroom_preview_bg_color @grey_50;
@define-color print_bg_color @darkroom_bg_color;
@define-color lighttable_bg_color @grey_55;
@define-color lighttable_preview_bg_color @darkroom_preview_bg_color;
@define-color lighttable_bg_font_color @grey_95;

/* Lighttable and film-strip */
@define-color thumbnail_font_color @grey_20;
@define-color thumbnail_bg_color @grey_50;
@define-color thumbnail_fg_color @thumbnail_font_color;
@define-color thumbnail_selected_bg_color @grey_80;
@define-color thumbnail_hover_bg_color @grey_65;
@define-color thumbnail_star_bg_color @thumbnail_font_color;
@define-color thumbnail_star_hover_color @thumbnail_font_color;

@define-color filmstrip_bg_color @darkroom_bg_color;

/* 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_40;
@define-color graph_exterior shade(@graph_bg, 0.9);
@define-color graph_border @grey_15;
@define-color graph_fg @grey_100;
@define-color graph_fg_active @grey_95;
@define-color graph_grid @grey_30;
@define-color graph_overlay @grey_50;
@define-color inset_histogram alpha(@grey_95, 0.50);

/* */
@define-color group_border #997D00;

/* Adjust middle grey picker on levels and rgb levels modules to make it visible */
#picker-grey
{
  color: @grey_70;
}


/* Primaries selected for visual legibility across a variety of
   gamuts, and to combine to pleasing secondaries. The combination of
   all three must either to either the same number or >= 255 to
   produce a neutral overlap. */
@define-color graph_red rgb(237,30,20);
@define-color graph_green rgb(28,235,26);
@define-color graph_blue rgb(14,14,233);

@define-color colorlabel_red #AD342F;
@define-color colorlabel_green #47BB5A;
@define-color colorlabel_blue #3D3EFF;
@define-color colorlabel_yellow #FFE938;
@define-color colorlabel_purple #C239C7;

/* 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;
  font-weight: 400;
  box-shadow:none;
  outline-style:none;
  text-shadow:none;
  border: 0;
  margin: 0;
  padding: 0;
  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 */
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;
}

/* Set no background and no border. And avoid undershoot and overshoot having too much empty space at top/bottom of sidepanels when scrolled */
.dt_accels_box treeview,
.combo,
.combo:disabled,
.dt_module_btn,
.dt_module_btn:disabled,
.dt_transparent_background,
.dt_transparent_background:checked,
.dt_transparent_background check:selected,
.dt_ignore_fg_state:checked,
filechooser .sidebar-button,
menuitem:hover arrow,
popover #bauhaus-combobox,
overshoot,
undershoot,
#usercss-box textview,
#view-dropdown .combo
{
  background-color: transparent;
  border: none;
}

/* Allow to resize all windows */
decoration
{
  margin: 0px; /* need to remains as px as just minimum size needed, no need to be scalable */
}

/* Default Gtk buttons and other entries */
button,
checkbutton check,
entry,
treeview entry,
textview,
#non-flat
{
  padding: 2px; /* this need to be kept as pixels for constant sizing and correct display with all font sizes */
  border: 0.07em solid @button_border;
  border-radius: 0.21em;
  background-color: @button_bg;
  font-weight: 400;
}

/* needed to align popup menu with combobox label */
combobox button
{
  padding: 2px;
}

/* the combobox popup menu can't cover the whole button for some reason
so we need to erase the background button while the popup is visible, aka checked state */
combobox button:checked
{
  background: transparent;
}

combobox window menu menuitem
{
  padding: 2px;
  margin: 0 0.25em;
}

combobox {
  margin: 2px 0.25em;
}

combobox window {
  margin: 2px 0.25em;
  padding: 0.25em 0;
}

/* then set specific settings for all text zones and combo */
.combo,
entry,
spinbutton button,
textview
{
  background-color: alpha(@fg_color, 0.09);
}

.combo *
{
  min-height: 1em;
  min-width: 1em;
}

/* Buttons in modules header, path-bar on filechooser dialog window and all text-button and related */
.dt_module_btn,
.path-bar button,
header button,
.text-button,
.text-button radio, /* this line and following one are needed to set good margin inside some buttons, especially in header buttons in about dialog window and on radio button and label inside star icon overlay menu */
.text-button label
{
  min-height: 1.2em;
  min-width: 1.2em;
  margin: 0.1em 0.07em;
}

.dt_module_btn,
.dt_ignore_fg_state:checked
{
  color: @button_fg;
}

spinbutton > button
{
  margin: 0.07em;
}

/* set disabled options of above settings */
button:disabled,
spinbutton *:disabled,
#collapsible spinbutton button:disabled,
#non-flat:disabled
{
  background-color: transparent;
  border: 0.07em solid alpha(@button_border, 0.35);
  color: @disabled_fg_color;
}

popover spinbutton  /* needed to set some margin on overlay popover between it and label */
{
  margin-left: 0.35em;
}


/* fix misalignment for specific icons related to bauhaus widgets */
.dt_plugin_ui .dt_bauhaus_alignment,
.dt_plugin_ui .dt_bauhaus_alignment #button-canvas
{
  margin: 0;
}

/* Default text fields and text boxes */
entry,
textview,
#top-first-line button#search-button
{
  padding: 2px;
  min-height: 1em;
}

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

entry selection
{
  background-color: shade(@field_selected_bg, 1.1);
}

/* Checkbox */
checkbutton check
{
  margin: 0.28em 0.56em 0.28em 0;
}

/* Separator */
separator
{
  border-left: 0.07em solid transparent;
}

/* set lighter opacity for specific items that need it (ex: color labels icons) */
.dt_dimmed
{
  opacity: 0.6;
}

.dt_dimmed:hover /* to set full opacity when hovering those items */
{
  opacity: 1;
}

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

#top
{
  border-bottom: 2px solid @grey_35;
}

#top-first-line
{
  background-color: @grey_35;
}

#top-first-line label {
  background-color: transparent;
}

#top-second-line {
  margin: 0;
  padding-left: 0.25em;
  padding-right: 0.25em;
  border-top: 1px solid @grey_30;
  background-color: @bg_color;
}

#menu-bar,
#menu-bar menuitem,
#menu-bar menuitem label {
  background-color: transparent;
}

#menu-bar menuitem:hover {
  background-color: alpha(@button_hover_bg, 0.5);
}

menuitem
{
  padding: 0.25em 0.5em;
}

menuitem menu menuitem
{
  padding: 0.25em;
}

menu separator
{
  margin: 0.25em 0;
  padding: 0;
  border-top: 1px solid @grey_50;
}

menubar menuitem label
{
  font-weight: 600;
}

menuitem menu menuitem label
{
  font-weight: 400;
}

menuitem menu menuitem.menu-active label,
menuitem.menu-active label
{
  font-weight: 800;
  color: @grey_100;
}

menubar menuitem,
menubar menuitem label
{
  border: none;
}

/*------------------------------
  - Header and footer toolbars -
  ------------------------------*/
#header-toolbar,
#footer-toolbar
{
  padding: 0.14em 0.28em;
  background-color: @bg_color;
}

#header-toolbar {
  background-color: @darkroom_bg_color;
}

#hinter /* label */
{
  padding-right: 0.25em;
  /* Some CJK fonts are taller than other fonts, this prevent size shaking. */
  min-height: 1.75em;
}

/* Set toolbars buttons in lighttable and darkroom views ; and top right button in accels window */
.dt_accels_stick,
#filter-colors-box .dt_module_btn,
#header-toolbar .dt_module_btn,
#footer-toolbar .dt_module_btn
{
  min-height: 1.7em;
  min-width: 1.7em;
}

/* Set default button spacing  for specific buttons */
.dt_section_expander #button-canvas,
.dt_big_btn_canvas #button-canvas,
#module-header #button-canvas
{
  margin: 12px; /* not real pixels. This is used as a percent extra space and couldn't be scalable */
}

#top-first-line button
{
  border-radius: 50%;
  background-color: transparent;
  border: 0;
  color: white;
  caret-color: transparent;
  outline-offset: 0;
}

#top-first-line button:hover
{
  background-color: @button_hover_bg;
}

#top-first-line button#search-button
{
  padding: 2px 0.7em; /* this need to be kept as pixels for constant sizing and correct display with all font sizes */
  border: 0;
  border-radius: 0.21em;
  background-color: alpha(@fg_color, 0.09);
  font-weight: 400;
  margin: 1px 1em 0 1em;
}

#top-first-line button#search-button label,
#top-first-line button#search-button image
{
  color: @fg_color;
  opacity: 0.6;
}

/*---------------------------
  - Side panels and modules -
  ---------------------------*/
/* Frame around modules boxes */
/*** NOTE: bauhaus controls inherit their font properties from there ***/
.dt_plugin_ui,
dialog,  /* dialog window background */
dialog .sidebar row:selected,   /* .sidebar lines here allow to select same settings for sidebar in preferences and filechooser */
dialog .sidebar row:selected:hover label,
#bauhaus-slider,  /* be sure there's some visible "spacing" around arrow on sliders by setting specific background on bauhaus-slider */
#background-job-eventbox  /* background of export progress bar */
{
  background-color: @plugin_bg_color;
}

#mask-toolbar #bauhaus-slider
{
  background-color: @bg_color;
  margin-left: 0.25em;
}


.dt_plugin_ui_main,
#guides-module-combobox
{
  padding: 1em 0.5em;
  margin: 0;
  border: none;
}

#blending-box
{
  padding: 0.5em;
  border: none;
  margin: 0;
}

.dt_plugin_ui_main
{
  border-top: 2px solid @grey_46;
}

.dt_module_frame
{
  border-top: none;
  border-bottom: none;
  margin: 0;
  padding: 0;
}

#right .dt_module_frame
{
  border-left: 3px solid @bg_color;
}

#left .dt_module_frame
{
  border-right: 3px solid @bg_color;
}

#right .dt_module_focus,
#right .dt_module_frame:focus
{
  border-left-color: shade(@field_selected_fg, 0.85);
}

#left .dt_module_focus,
#left .dt_module_frame:focus
{
  border-right-color: shade(@field_selected_fg, 0.85);
}

.dt_module_frame:first-child #module-header
{
  border-top:none;
}

/* Gradient sliders */
.dt_gslider,
.dt_gslider_multivalue
{
  min-height: 1.7em;
  padding: 0.56em;
}

/* Set duplicate module space in darkroom */
.dt_duplicate_ui grid,
.dt_duplicate_ui grid > label
{
  margin: 0.28em 0.14em;
}

.dt_duplicate_ui entry
{
  margin: 1em 0 1em 0.5em;
}

/* Set modules name header */
#module-header
{
  padding: 0.33em 0.25em;
  border-top: 2px solid @grey_38;
  margin: 0;
}

/* Labels in modules */
#iop-panel-label,
#lib-panel-label
{
  color: @plugin_label_color;
  padding: 0 0.14em 0.14em 0.45em;
  font-weight: 700;
  font-family: sans-serif;
  font-size: 1.1em;
}

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

/* Labels of controls sections in modules */
.dt_section_label,
#blending-box .dt_section_label  /* as those sections has icons on same line, we need to apply dt_section_label class on box above label and so separate what we apply on border and what we apply on box above */
{
  padding: 0.14em 0;
  color: @section_label;
  font-weight: 500;
  border-bottom: 0.05em solid @section_label;
  margin: 0.21em 0;
}

/* Collapsible sections on lib & iop modules */
#collapse-block
{
  margin: 0.21em 0;
}

#collapsible
{
  border: 0.07em solid shade(@collapsible_bg_color, 1.05);
  border-top: none;
  padding: 0.28em;
}

#collapsible,
#collapsible #bauhaus-slider
{
  background-color: shade(@collapsible_bg_color, 1.04);
}

.dt_section_expander,
.dt_section_expander label
{
  background-color: @collapsible_bg_color;
  border: none;
  margin-top: 0.14em;
}

/*-------------------
  - Scope/Histogram -
  -------------------*/
#main-histogram buttonbox
{
  margin: 0.21em;
}

#main-histogram .dt_module_btn
{
  min-height: 1em;
  min-width: 1em;
}

/* be sure all color icons have (nearly) same size ; needed has red color is in stack widget and this change how the size is rendered */
#main-histogram #green-channel-button,
#main-histogram #blue-channel-button
{
  min-width: 1.1em;
}

/* set background color and color of scope/histogram buttons */
#main-histogram .dt_module_btn:not(.toggle)
{
  color: alpha(@field_selected_fg, 0.56);
  background-color: alpha(darker(@button_bg),0.8);
  border: 0.07em solid alpha(@button_bg, 0.33);
}

/* set channel buttons at inactive state */
#red-channel-button
{
  background-color: alpha(@graph_red, 0.2);
}

#green-channel-button
{
  background-color: alpha(@graph_green, 0.2);
}

#blue-channel-button
{
  background-color: alpha(@graph_blue, 0.2);
}

/* set now them active state */
#red-channel-button:checked
{
  background-color: alpha(@graph_red, 0.66);
}

#green-channel-button:checked
{
  background-color: alpha(@graph_green, 0.66);
}

#blue-channel-button:checked
{
  background-color: alpha(@graph_blue, 0.66);
}

/* set now hover state */
#red-channel-button:hover
{
  background-color: alpha(@graph_red, 0.5);
}

#green-channel-button:hover
{
  background-color: alpha(@graph_green, 0.5);
}

#blue-channel-button:hover
{
  background-color: alpha(@graph_blue, 0.5);
}

/*------------------
  - Dialog windows -
  ------------------*/
/* Set default settings */


/* remove left and reduce top margin only on dialog filechooser box */
dialog filechooser
{
  margin-top: -0.21em;
  margin-left: -0.42em;
}

/* Set title headerbar for some themes and/or desktops environment */
dialog headerbar
{
  background-color: @border_color;
  padding: 0.2em 0.6em;
}

dialog headerbar entry
{
  margin: 0.56em;
}

/*------------------------------------------------
  - Context menu, bauhaus, tooltips & comboboxes -
  ----------------------------------------------*/
/*** so nearly everything that pop out */
.dt_bauhaus window,
.popup,
context-menu,
menu,
menuitem > arrow,
tooltip,
popover,
popover #bauhaus-slider,
#range-current
{
  opacity: 1;  /* this is needed for tooltip on/off feature with Shift+t shortcut */
  background-color: @tooltip_bg_color;
  border-radius: 0.14em;
  min-height: 0.4em;
  min-width: 0.4em;
}

menu
{
  padding: 0.14em 0;
}

combobox cellview
{
}

.popup,
popover
{
  padding: 0.42em;
}

/* Adjust check menuitems */
menuitem check,
menuitem check:selected
{
  min-width: 0.7em;
  min-height: 0.7em;
  margin: 0 0.35em;
}

/* set default settings on bauhaus popup, items that can be selected : items inside categories titles set above */
.dt_bauhaus_popup
{
  color: shade(@fg_color, 0.9);
  padding: 0.42em 0 0 0.42em;   /* set only padding on top and left margin due to some default hardcoded spacing on bottom and place for icons on some bauhaus on the right */
}

/* fix for menuitem in bottom toolbar mainly */
menuitem > arrow
{
  padding-right: 0.42em;
}

/* then spacing around bauhaus widgets */
.dt_bauhaus
{
  margin: 0.14em 0;
}

/* and set menuitem related to sort of combobox like metadata presets in import module */
#view-dropdown button,
#view-dropdown menuitem,
#view-label
{
  padding: 0.07em 0.42em;
  margin: 0;
}

tooltip,
#range-current
{
  border: 0.07em solid shade(@tooltip_bg_color, 1.5);
  border-radius: 0;
}

tooltip label,
#range-current label
{
  color: @tooltip_fg_color;
}

combobox separator
{
  min-height: 0.07em;
}

/*----------------------
  - GTK Notebooks tabs -
  ----------------------*/
notebook tabs,
#modules-tabs,
#blending-header,
#guides-line
{
  font-family: sans-serif;
}

#modules-tabs,
#guides-line
{
  background-color: @field_active_bg;
}

#blending-header
{
  padding: 0 0.25em;
  background-color: @grey_50;
}

/* set sizes of "buttons" in modules and blending tabs ; and guides lines too */
#modules-tabs .toggle
{
  min-height: 2em;
}

.dt_plugin_ui #blending-header .dt_module_btn,
#guides-line .toggle
{
  min-height: 1.3em;
}

#modules-tabs .dt_module_btn,   /* This is needed separately to set a minimal width if panel is really narrow */
.dt_plugin_ui #blending-header .dt_module_btn,
#guides-line .dt_module_btn
{
  border-radius: 0;
  min-width: 1.5em;
  margin: 0;
}

/* reduce and align now hamburger menu of modules and blending tabs */
.dt_plugin_ui #blending-header .dt_module_btn,
#modules-tabs .dt_module_btn
{
  padding: 0.3em;
}

#search-box entry placeholder {
  color: @grey_25;
}

/* Set notebook tabs */
notebook tab
{
  border: none;
}

notebook tab label
{
  color: @grey_80;
  padding: 0.28em 0.07em;
  border-bottom: 3px solid @bg_color;
}

notebook tab:hover label
{
  border-bottom: 3px solid @grey_100;
  color: @grey_100;
}

notebook tab:checked label
{
  border-bottom: 3px solid @grey_90;
  color: @grey_95;
}

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

#modules-tabs notebook tab
{
  padding: 0;
}

#modules-tabs notebook tabs arrow
{
  border-bottom: 3px solid @bg_color;
}

#modules-tabs notebook tab label
{
  padding: 0.25em;
  font-size: 1.25em;
  color: @grey_85;
}

#modules-tabs notebook header, #modules-tabs notebook
{
  margin-bottom: 0;
  color: @grey_65;
}

#modules-tabs notebook tab:hover label
{
  color: @grey_100;
}


#modules-tabs notebook tab:checked label
{
  color: @grey_100;
}

#modules-tabs notebook:disabled tab label
{
  border-bottom: none;
  color: @grey_65;
}



/*--------------------------
  - GTK sliders and scales -
  --------------------------*/
/*** WARNING : sliders IN modules are bauhaus (from a custom lib in darktable), not standard GTK sliders (see below) ***/
scrollbar.vertical slider
{
  background-color: @scroll_bar_inactive;
  border: 1px solid transparent;
  min-width: 0.6em;
  min-height: 1em;
}

scrollbar.horizontal slider
{
  background-color: @scroll_bar_inactive;
  border: 1px solid transparent;
  min-width: 1em;
  min-height: 0.6em;
}


scale contents trough
{
  background-color: @scroll_bar_bg;
  border-radius: 0.3em;
  min-width: 0.6em;
  min-height: 0.6em;
}

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

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

scrollbar
{
  border-color: @scroll_bar_bg;
  background: @scroll_bar_bg;
  border-radius: 0.6em;
  min-height: 0.6em;
  min-width: 0.6em;
  margin: 0.1em;
}

/* Scrollbars hover state */
scrollbar slider:hover,
scale contents trough slider:hover
{
  background-color: @scroll_bar_active;
}

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

treeview header label
{
  font-weight: 700;
  padding: 0.14em;
}

/* set margin around treeview (need to be applied on scrolledwindow which is a direct parent) */
.dt_spacing_sw scrolledwindow
{
  margin: 0.21em 0;
}

/* Set main title in top of accel window reminder */
.dt_accels_cat_title
{
   background-color: transparent;
   font-weight: bold;
   font-size: 1.1em;
   padding: 0.7em 0;
}

/*-------------------------------------
  - Preferences dialog window options -
  -------------------------------------*/
#preferences-content,
#preferences-content .dialog-action-box,
#quick-presets-manager box  /* set same setting on quick preset manager dialog window ; accessible to bottom left button on footer bar in darkroom view */
{
  margin: 0; /* reset default dialog margin to main items. And needed to have an hover and selected effect on all width of categories in sidebar */
}

/* Set preferences margins in main part */
#preferences-box stack > box,
#preferences-box stack > scrolledwindow
{
  padding: 0.7em 1.2em;
}

/* Edit CSS view on preferences dialog window */
#usercss-box
{
  border: 0.07em inset @border_color;
  background-color: shade(@bg_color, 1.075);
  margin-top: 0.7em;
  padding: 0.7em;
}

/* Set text size */
#preferences-notebook scrolledwindow label /* label text on main tabs */
{
  min-height: 1.5em;
}

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

/* Just add spacing between label settings and setting beside */
#preferences-notebook stack widget label
{
  margin-right: 1.75em;
}

#preferences-notebook combobox,
#preferences-notebook spinbutton,
#preset_controls entry,
#shortcut_controls entry
{
   min-width: 15em;
}

/* Set buttons and search field on presets and shortcuts control buttons */
#shortcut_controls,
#preset_controls
{
  margin-top: 0.35em;
}

#shortcut_controls button,
#preset_controls button
{
  margin-left: 0.28em;
}

#shortcut_controls .search,
#preferences-box #shortcut_controls check
{
  margin-right: 0.28em;
}

/*--------------------------------
  - Module layouts manager dialog -
  --------------------------------*/
/* set top box header */
#modulegroups-top-boxes
{
  margin-right: 6em;
}

/* set main group modules title */
#modulegroups-groups-title label
{
  font-size: 1.1em;
}

#modulegroups-groups-title label,
#modulegroups-header-center entry
{
  font-weight: 700;
  margin-right: 0.28em;
}

#modulegroups-groups-title,
#modulegroups-groups-box
{
  margin-top: 0.42em;
}

#modulegroups-groups-box
{
  border-top: 0.035em solid  @section_label;
  padding-top: 0.5em;
}

/* set groups part, starting by setting same margin around top part and group boxes */
#modulegroups-topbox,
#modulegroups-groupbox
{
  margin: 0 0.5em;
}

#modulegroups-header-center,
#modulegroups-iop-header
{
  background-color: shade(@bg_color, 1.05);
  padding: 0.28em;
}

/* now set borders around group header and group list */
#modulegroups-header-center
{
  border: 0.07em solid @bg_color;
  border-radius: 0.5em 0.5em 0 0;
  margin-bottom: 0.14em;
}

#modulegroups-iop-header:first-child
{
  border-top: 0.07em solid @bg_color;
  border-radius: 0;
  margin-top: 0.14em;
}

#modulegroups-iop-header
{
  border-left: 0.07em solid @bg_color;
  border-right: 0.07em solid @bg_color;
}

#modulegroups-iop-header:last-child
{
  border-bottom: 0.07em solid @bg_color;
  border-radius: 0 0 0.5em 0.5em;
}

/* set group icons */
#modulegroups-group-icon,
#modulegroups-icons-popup .dt_module_btn
{
  min-height: 1.8em;
  min-width: 1.8em;
  margin: 0 0.7em 0 0.07em;
}

/*---------------------------------------------------------------
  - Set sidebars settings on preferences window and filechooser -
  ---------------------------------------------------------------*/
/* Set default sidebars settings */
filechooser .sidebar,
#preferences-box .sidebar scrolledwindow
{
  padding: 0; /* 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: 0.35em;
}

/* Set lines states */
filechooser .sidebar-icon,
filechooser .sidebar-label
{
  padding: 0.42em;
}

filechooser .sidebar-button /* set icons displayed in the right of the sidebar, like eject buttons */
{
  margin-right: 0.28em;
}

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

#preferences-box .sidebar row,
#preferences-box .sidebar row:selected
{
  border-left: 0.14em solid @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 chosen color if category on sidebar is selected */
}

#preferences-box .sidebar label
{
  padding: 0.14em 0.84em;
}


/*--------------------------------------------------
  - Collect module and quick filters on header bar -
--------------------------------------------------*/

/* and adjust label and color buttons, especially in header bar */
.quick_filter_box > * {
	margin-left: 0.25em;
	margin-right: 0.25em;
}

.quick_filter_box #quickfilter-culling label
{
}

#quickfilter-culling
{
  background-color: @grey_45;
}

#quickfilter-culling:selected,
#quickfilter-culling:selected,
#quickfilter-culling:checked
{
  background-color: @grey_65;
}

#quickfilter-ratings,
#quickfilter-colors,
#quickfilters-altered {
  margin-right: 1em;
}

#rejected-filter {
  margin-right: 1em;
}

.menu-text-entry,
spinbutton entry {
  margin: 2px;
  border: 0;
  padding: 0 0.5em;
  background-color: @grey_50;
}

spinbutton button {
  border: 0;
  border-radius: 50%;
  padding: 0;
  margin: 2px 1px;
  min-width: 1.7em;
  min-height: 1em;
}

#lib-label-colors .dt_module_btn
{
  padding: 0;
  margin: 0 2px;
}

.quickfilter-label {
  color: @section_label;
  font-family: sans-serif;
  font-weight: 500;
  padding-left: 0.25em;
}

.quick_filter_box separator.horizontal,
.lighttable_box separator.horizontal
{
  margin: 2px 0.5em;
  border: 1px solid @grey_35;
  padding: 0;
}

#top-first-line separator.horizontal
{
  margin: 2px 0.5em 2px 1em;
  border: 1px solid @grey_45;
  padding: 0;
}

/*------------
  - Map view -
  ------------*/
/* Set how to display result list on find location module */
#dt-map-location > *
{
margin: 0.14em;
}

#dt-map-location label
{
padding: 0.14em;
}

#dt-map-location
{
border-bottom: 0.07em solid alpha(@selected_bg_color, 0.75);
}

#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 ***/
/* Set specific content */
#import-presets,
#modulegroups-ro
{
  font-style: italic;
}

/* About window: set different background for credits view */
#about-dialog scrolledwindow
{
  background: @bg_color;
}

#about-dialog grid *
{
  padding: 0.14em;
}

/* Special modules: image infos, navigation and search ones */
#image-info
{
}

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

/* search boxes (background color is set on collect module part above ; to be the same as other filters in quick filter bar) */
#right .search  /* set only search box margin in modules panel */
{
  margin: 0.14em 0.28em;
}

.search label
{
  margin-right: 0.5em;
}

.search image.left
{
  padding: 0 0.21em;
}

.search image:disabled
{
  color: shade(@fg_color, 0.75);
}

/* set "buttons" combo in lens correction module */
#lens-module .text-button
{
  background-color: alpha(@fg_color, 0.06);
  min-height: 1em;
}

/* Progress bar on bottom left side when exporting, importing, etc... */
#background-job-eventbox label
{
  margin: 0.07em 0.28em;
}

progressbar trough
{
  background-color: @darkroom_preview_bg_color;
}

progressbar progress
{
  background-color: @scroll_bar_active;
  border-radius: 0.28em;
}

/* Be sure to have minimum width allowed for infos on images infos module if reducing panel width */
#brightbg
{
  min-width: 5.6em;
  padding-left: 0.14em;
}

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

/* Set messages: first those on bottom middle of the UI, for example "loading image..." or "working on..." ; then deprecated and warning messages */
.dt_messages
{
  color: @log_fg_color;
  font-weight: bold;
  font-size: 1.05em;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.5em 1em;
  border-radius: 0.5em;
}

.dt_warning
{
  background-color: #852A2A;
  padding: 0.42em;
}

/* then set infos shown on top of the image on darkroom, like for example opacity in drawn masks */
.top .dt_messages
{
  border-radius: 0 0 0.56em 0.56em;
}

/* Set some specific fonts */
.dt_monospace
{
  font-family: monospace;
}

/* Set below history items in darkroom */
/* the label buttons */
.dt_history_items
{
  padding: 0 0.21em;
  margin: 0.14em;
}

/* then the switches */
.dt_history_switch:disabled /* state of those switch is always disabled */
{
  color: @plugin_label_color;
  font-size: 0.75em;
  margin-left: 0.42em;
  border: 0;
}

/* and the history number */
#history-number
{
  padding: 0 0.35em 0 0;
}

/* deactivated switch buttons, make them less visible */
.dt_history_switch_off,
.dt_history_switch_off:disabled
{
  color: @disabled_fg_color;
}

/*---------------------
  - Set color pickers -
  ---------------------*/
/** Module in darkroom left panel **/
/* the main color picker button */
#color-picker-button
{
  min-height: 1.5em;
  min-width: 1.5em;
  border: 0;
}

#color-picker-area
{
  min-height: 5em;
  margin-bottom: 0.14em;
}

#live-sample
{
  margin: 0.21em 0.21em 0.21em 0;
  min-width: 2em;
}

/* 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;
  border: 0;
}

#picker-grey
{
  color: @grey_50;
  border: 0;
}

#picker-white
{
  color: @grey_100;
  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 */
.dt_history_items:active,
.dt_history_items:checked,
button:active,
button:checked,
button:selected,
cell:selected,
checkbutton check:checked,
combobox window *:active,
combobox window *:selected,
entry:checked,
filechooser *:selected,
menuitem:active,
menuitem:selected,
messagedialog .default,  /* this show that a button in confirmation action pop-up has the focus (no by default) */
treeview *:selected:not(check),
treeview *:checked:not(check)
{
  background-color: @field_selected_bg;
  color: @field_selected_fg;
}

/* History currently selected button ; they don't need to set background */
.dt_history_items:active *,
.dt_history_items:checked *
{
  color: @field_selected_fg;
}

/* Hover states, some needed background only */
.dt_history_items:hover,
.dt_transparent_background:hover,
button:hover:not(.combo):not(.dt_no_hover),
dialog .sidebar :hover,
menuitem:hover,
notebook tab:hover,
radiobutton:hover label,
treeview:not(#lutname) *:hover:not(check),
#dt-range-date-popup .text-button:hover,
#lens-module .text-button:hover,
#main-histogram .dt_module_btn:hover:not(.toggle),
#non-flat:hover,
#view-label:hover,
#view-dropdown .combo:hover
{
  background-color: alpha(@button_hover_bg, 0.5);
  border-color: transparent;
  color: shade(@fg_color, 1.15);
}

.combo:hover,
.combo:hover cellview,
.dt_bauhaus:hover,
combobox window *:hover,
menuitem:hover > arrow
{
  color: shade(@fg_color, 1.2);
}

.dt_bauhaus:focus,
.dt_bauhaus:selected,
button:focus label,
button:active label,
checkbutton:focus label,
checkbutton:active label
{
  color: shade(@fg_color, 1.6);
  font-weight: 800;
}

.module-dimmed {
  opacity: 0.5;
}

.dt_history_switch_off:hover  /* set specific hover effect for disabled modules in history stack */
{
  color: shade(@fg_color, 0.8);
}

/* workaround for a macOS quartz GTK backend bug
   making combobox list appear behind dialog window:
   color of "button:checked cellview" has to differ from
   "button:hover cellview", don't ask for a reason for that */
button:checked cellview
{
  color: shade(@button_hover_fg, 0.99);
}

/* Treeviews and filechoosers states */
treeview check, /* set specific background color about check buttons like in copy/paste dialog window */
menuitem:not(.dt_transparent_background) check  /* be sure transparent background is applied to preset and blend menus */
{
  background-color: @field_active_bg;
  border-color: @border_color;
}

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

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

treeview check:hover,
menuitem check:hover
{
  color: @bauhaus_fg_hover;
}

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

  /* set active menu items: needed for some Pango issues not rendering synthetic bold for all OS */
.active_menu_item label
{
  font-weight: bold;
}

/* Views links states in header */
.dt_bauhaus_popup:selected,
#view-label:selected
{
  color: @fg_color;
  font-weight: 800;
}

/* Bauhaus states */
.dt_bauhaus_popup:disabled /* set categories titles in bauhaus combobox popup ; for example in collections module */
{
  color: white;
}

.dt_bauhaus_popup:hover
{
  color: @bauhaus_fg_hover;
}

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

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

.iop_drag_icon
{
  border: 0.07em solid @plugin_bg_color;
  background-color: @bg_color;
}

.iop_drop_before
{
   border-bottom: 2.4em solid @plugin_bg_color;
}

.iop_drop_after
{
   border-top: 2.4em solid @plugin_bg_color;
}

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

Hierarchy :

  #thumbtable-filemanager / #thumbtable-filmstrip / #thumbtable-zoom (GtkLayout -- main widget which contains all thumbs)
    .thumb-main                                                      (GtkOverlay -- thumbnail widget)
                                                           (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 occurrences 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 around thumb
    class = .dt_thumbnail_rating_[0-6]   rating value of the image (6==rejected)
  .thumb-image
    only the borders are drawn - background is ignored
    color transparency is used to draw the image
  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
{
  background-color: @lighttable_bg_color;
}

.thumb-main {
  margin: 4px;
}

.thumb-background
{
  background-color: @thumbnail_bg_color;
  border: 4px solid @thumbnail_bg_color;
}

/* set hover effect */
.thumb-main:hover .thumb-background
{
  background-color: @thumbnail_hover_bg_color;
  border-color: @thumbnail_hover_bg_color;
}

.thumb-main:selected .thumb-background,
.thumb-main:active .thumb-background
{
  background-color: @thumbnail_selected_bg_color;
  border-color: @thumbnail_selected_bg_color;
}


/*-----------------
  - Image options -
  -----------------*/
.thumb-image
{
  margin: 4px; /* needs to be set equal to .thumb-background border to avoid overlap */
}

#thumbtable-filmstrip .thumb-main:selected
{
  border-top: 0.105em solid @border_color;
}

/* Set top cursor and bottom-label */
.thumb-bottom-label,
.thumb-cursor
{
  color: transparent;
}

#thumbtable-filmstrip .thumb-main:selected .thumb-cursor
{
  color: @border_color;
}

/* Set border color around thumbnails */
.thumb-cell {
  border: 4px solid transparent;
  margin: -2px;
}

.dt_group_left,
.thumb-main.dt_group_left:selected
{
  border-left: 4px solid @group_border;
}

.dt_group_top,
.thumb-main.dt_group_top:selected
{
  border-top: 4px solid @group_border;
}

.dt_group_right,
.thumb-main.dt_group_right:selected
{
  border-right: 4px solid @group_border;
}

.dt_group_bottom,
.thumb-main.dt_group_bottom:selected
{
  border-bottom: 4px solid @group_border;
}

.dt_thumbtable_reorder .thumb-main:hover
{
  border-left : 4px solid @group_border;
}

.dt_group_bottom.hovered-group
{
  border-bottom-color: shade(@group_border, 1.3);
}

.dt_group_top.hovered-group
{
  border-top-color: shade(@group_border, 1.3);
}

.dt_group_left.hovered-group
{
  border-left-color: shade(@group_border, 1.3);
}

.dt_group_right.hovered-group
{
  border-right-color: shade(@group_border, 1.3);
}

.dt_group_right.non-hovered-group,
.dt_group_left.non-hovered-group,
.dt_group_top.non-hovered-group,
.dt_group_bottom.non-hovered-group
{
  border-color: transparent;
}

/*----------------------------------------
  - Popover overlays menu from star icon and grid lines -
  ----------------------------------------*/
#show-tooltip
{
  margin: 0.28em 0 0 0.28em;
  border-top: 0.07em 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 ***/

/*---------------
  - Bottom area -
  ---------------*/
.thumb-bottom,
.thumb-top
{
  border: 0;
  margin: 0;
  padding: 4px;
}

/* Set background on thumbnails hover overlays */
.dt_overlays_hover .thumb-main:hover .thumb-bottom,
.dt_overlays_hover .thumb-main:selected .thumb-bottom
{
  background-image: linear-gradient(
    rgba(198, 198, 198, 0.) 0%,
    rgba(198, 198, 198, 0.45) 25%,
    rgba(198, 198, 198, 0.9) 50%,
    rgba(198, 198, 198, 0.9) 100%);
}

.dt_overlays_hover .thumb-main:hover .thumb-top,
.dt_overlays_hover .thumb-main:selected .thumb-top
{
  background-image: linear-gradient(
    rgba(198, 198, 198, 0.9) 0%,
    rgba(198, 198, 198, 0.9) 50%,
    rgba(198, 198, 198, 0.45) 75%,
    rgba(198, 198, 198, 0.) 100%);
}


/*--------------------
  - Thumbnails infos -
  --------------------*/
/* set some padding for some icons */
.thumb-star
{
  margin: 0 0.125em;
}

.thumb-reject
{
  margin-right: 0.25em;
}

.thumb-colorlabels
{
  margin-left: 0.25em;
  opacity: 0.8;
}

.thumb-alternative
{
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #666;
  padding: 0.5em;
}

.thumb-alternative *
{
  color: black;
  font-size: 100%;
  font-weight: 700;
}

.thumb-alternative separator
{
  color: #666;
  min-height: 1px;
}

/* 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,
.thumb-ext  /* by default, the extension is hidden */
{
  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 .thumb-ext
{
  color: @thumbnail_font_color;
}

/* Make inactive stars more discrete when not hovered */
.dt_overlays_always .thumb-star
{
  color: @thumbnail_font_color;
}

/* 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 .thumb-main:hover .dt_thumb_btn,
.dt_overlays_always .thumb-main:selected .dt_thumb_btn,
.dt_overlays_hover .thumb-main:hover .dt_thumb_btn,
.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 .thumb-main:hover .thumb-ext,
.dt_overlays_hover .thumb-main:selected .dt_thumb_btn,
.dt_overlays_hover .thumb-main:selected .thumb-group,
.dt_overlays_hover .thumb-main:selected .thumb-altered,
.dt_overlays_hover .thumb-main:selected #thumb-audio,
.dt_overlays_hover .thumb-main:selected .thumb-ext
{
  color: @thumbnail_font_color;
}

/* Set red reject icon when visible */
.dt_overlays_hover .thumb-main:hover .thumb-reject:active,
.dt_overlays_hover .thumb-main:hover .thumb-reject:hover,
.dt_overlays_hover .thumb-main:selected .thumb-reject:active,
.dt_overlays_hover .thumb-main:selected .thumb-reject:hover,
.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 .thumb-reject:hover
{
  color: red;
}

.dt_overlays_hover .thumb-main:hover .thumb-star,
.dt_overlays_hover .thumb-main:selected .thumb-star,
.dt_overlays_always .thumb-star
{
  background-color: rgba(0, 0, 0, 0.07);
}


/* Set stars icon when active */
.dt_overlays_hover .thumb-main:hover .thumb-star:active,
.dt_overlays_hover .thumb-main:selected .thumb-star:active,
.dt_overlays_always .thumb-star:active
{
  color: @thumbnail_font_color;
  background-color: @thumbnail_font_color;
}

/* Set stars icon hover effect */
.dt_overlays_hover .thumb-main:hover .thumb-star:hover,
.dt_overlays_always .thumb-main:hover .thumb-star:hover
{
  color: @thumbnail_star_hover_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
{
  color: @thumbnail_fg_color;
}

/* Set rejected images */
.dt_thumbnail_rating_6 .thumb-image
{
  opacity: 0.35; /* only the transparency is used to fade the image drawing */
}

.dt_thumbnail_rating_6.thumb-main:hover .thumb-image
{
  opacity: 1.; /* take back image to normal state by removing transparency when hovering the image */
}

.dt_overlays_always .dt_thumbnail_rating_6 .thumb-ext,
.dt_overlays_always .dt_thumbnail_rating_6 .thumb-altered,
.dt_overlays_always_extended .dt_thumbnail_rating_6 .thumb-ext,
.dt_overlays_always_extended .dt_thumbnail_rating_6 .thumb-altered,
.dt_overlays_always_extended .dt_thumbnail_rating_6 .thumb-bottom-label,
.dt_overlays_mixed .dt_thumbnail_rating_6 .thumb-ext,
.dt_overlays_mixed .dt_thumbnail_rating_6 .thumb-altered
{
  color: rgba(0,0,0,0.15); /* add some transparency to infos items in thumbnail */
}

.dt_thumbnail_rating_6 .thumb-star
{
  color: transparent; /* needed to hide completely stars in rejected images as they are not needed, except in hover mode if we want to un-reject images */
}

.thumb-localcopy,
.thumb-ext
{
  margin-right: 0.5em;
}

.thumb-altered,
.thumb-group,
.thumb-audio
{
  margin-left: 0.5em;
}




/*---------------------------------------------------------
  - Hide icons on all lighttable modes and duplicate ones -
  ---------------------------------------------------------*/
.dt_duplicate_ui .thumb-main .thumb-group,
.dt_duplicate_ui .thumb-main .thumb-altered,
.dt_duplicate_ui .thumb-main #thumb-audio,
.dt_duplicate_ui .thumb-altered,
.dt_duplicate_ui #thumb-audio,
.dt_duplicate_ui .thumb-group
{
  color: transparent;
}

/* Set zoom info */
.thumb-zoom-label
{
  color: transparent;
  background-color: transparent;
  border-radius: 0.28em;
  padding: 0.07em 0.42em;
}

/* Lighttable toolbox */
#lighttable_layouts_box,
#footer-toolbar .toggle,
#footer-toolbar entry,
#footer-toolbar scale
{
  margin: 0.07em 0.28em;
}



*,
#lib-plugin-ui,
#iop-plugin-ui,
#bauhaus-popup,
#modules-tabs,
#left,
#right,
combobox,
combobox *,
togglebutton,
togglebutton *,
notebook,
notebook *,
notebook tab,
notebook tab *,
table,
table *,
row,
row *,
frame,
frame *,
alignment,
entry,
entry *,
dialog,
dialog *,
colorswatch,
colorswatch *,
stack,
stack *,
scrollbar,
scrollbar *,
eventbox,
eventbox *,
scale,
scale *,
button,
button *,
treeview,
treeview *,
menu,
menu *,
separator,
eventbox,
eventbox *,
box,
box *
{
    font-family: "Roboto Light", "Roboto",                  /* best case scenario */
                 "Segoe UI Light", "Segoe UI",              /* Windows 10 default */
                 "SF Pro Display Light", "SF Pro Display",  /* Mac OS X default */
                 "Ubuntu Light", "Ubuntu", "IPAPGothic",    /* Ubuntu default */
                 "Cantarell",                               /* Gnome default */
                  sans-serif;                                /* default default */
    font-weight: 300;
}

.dt_section_label,
.quickfilter-label,
.dt_section_label *
{
    font-family: "Roboto Medium", "Roboto",
                 "Segoe UI Semibold", "Segoe UI",
                 "SF Pro Display Medium", "SF Pro Display",
                 "Ubuntu Medium", "Ubuntu", "IPAPGothic",
                 "Cantarell",
                  sans-serif;
    font-weight: 500;
}

#iop-panel-label,
#lib-panel-label
{
    font-family: "Roboto Condensed", "Roboto",
                 "Segoe UI Condensed", "Segoe UI",
                 "SF Pro Display", "SF Pro Display",
                 "Ubuntu Condensed", "Ubuntu", "IPAPGothic",
                 "Cantarell",
                  sans-serif;
    font-weight: 400;
    font-stretch: condensed;
}

notebook tabs,
#modules-tabs,
#blending-header,
tooltip label,
.active_menu_item * /* needed for some Pango issues not rendering synthetic bold for all OS */
{
    font-family: "Roboto",
                 "Segoe UI",
                 "SF Pro Text",
                 "Ubuntu", "IPAPGothic",
                 "Cantarell",
                  sans-serif;
    font-weight: 400;
    font-stretch: normal;
}


#shortcut-search-dialog,
#shortcuts-search-dialog dialog .dialog-vbox
{
  margin:0;
  padding:0;
  background: transparent;
}

#shortcut-search-dialog entry
{
  background-color: @button_bg;
}
