LUMIERA.clone/src/stage/lumiera.css

/*
  lumiera.css  -  GTK-3 style sheet for the Lumiera GUI

  Copyright (C)         Lumiera.org
    2014,               Hermann Vosseler <Ichthyostega@web.de>

  Based on the GKT-2 stylesheet by Joel Holdsworth, which in turn
  was based on the styling of the Ardour DAW software (Ardour.org)

  Styles and Graphics of the Lumiera GUI can be used and redistributed
  under the the terms of the GNU General Public License version 2 or
  above, or (at your option) under Creative Commons CC-By-SA.

* ********************************************************/



/* ---------- Default Colours and Style ------------ */

@define-color bg_color rgb(35%, 35%, 40%);
@define-color fg_color rgb(80%, 80%, 80%);

@define-color hover_bg_color #565690;

@define-color field_color       #1a1e20;
@define-color hover_field_color #2B2B27;

@define-color selected_fg_color #05182F;
@define-color selected_bg_color #F0E592;

@define-color disabled_fg_color shade(@fg_color, .6);
@define-color disabled_bg_color #4C5159;

@define-color menue_button_color shade(@bg_color, .85);


  * {
    border-width: 1px;
    border-style: outset;
    border-color: shade(@bg_color, 0.80);
    
    color:            inherit; /* by default inherit content colour from parent widget */
    background-color: inherit;
}

GtkWindow {
    color:            @fg_color;
    background-color: @bg_color;
}

  .default:HOVER,
  .button:HOVER {
    background-color: @hover_bg_color;
}

  .default:ACTIVE,
  .button:ACTIVE {
    color: shade(@fg_color, 1.2);
    background-color: @hover_bg_color;
    border-color: shade(@bg_color, 1.5);
    border-style: solid;
    border-width: 1px;
}

  .entry, .view {
    /* any active or text input area */
    background-color: @field_color;
}

  .entry:HOVER,
  .view:HOVER {
    background-color: @hover_field_color;
}

  .entry:SELECTED {
    color:            @selected_fg_color;
    background-color: @selected_bg_color;
}

  *:INSENSITIVE,
  .buttonINSENSITIVE,
  .entry:INSENSITIVE {
    color:            @disabled_fg_color;
    background-color: @disabled_bg_color;
}


  .menubar {
    background-image: -gtk-gradient(linear, left top, left bottom,
                                    from(shade(@bg_color, 1.2)),
                                      to(@menue_button_color));
}

  .menuitem * {
    /* can't style the background directly, thus use a contextual selector */
    color:            @fg_color;
    background-color: @menue_button_color;
}

  .menuitem:HOVER {
    background-color: @hover_bg_color;
}

  .menuitem:INSENSITIVE * {
    color:            @disabled_fg_color;
    background-color: @disabled_bg_color;
}

/* ==============/////TODO left-over from the old GTK-2 stylesheet

style "medium_text"
{

}
 	
style "medium_bold_entry" = "medium_text"
{
	fg[NORMAL] = { 0.70, 0.70, 0.70 }
	fg[ACTIVE] = { 0.70, 0.70, 0.70 }
	
    bg[NORMAL] = { 0.35, 0.35, 0.40 }                   ↻ redundant
	
	base[NORMAL] = { 0, 0, 0 }
	base[ACTIVE] = { 0, 0, 0 }
	base[SELECTED] = { 0, 0, 0 }
}

style "default_base" = "medium_text"
{
  GtkWidget::cursor_color =  {1.0, 1.0, 1.0 }
  GtkButton::default_border = { 0, 0, 0, 0 }
  GtkButton::default_outside_border = { 0, 0, 0, 0 }
  GtkTreeView::vertical-padding = 0
  GtkTreeView::horizontal-padding = 0
  GtkTreeView::even-row-color = { 0, 0, 0 }
  GtkTreeView::odd-row-color = { 0, 0, 0 }
  
  fg[NORMAL] = { 0.80, 0.80, 0.80 }                      ✔ ported
  fg[ACTIVE] = { 0.80, 0.80, 0.80 }                      ✗ changed
  fg[PRELIGHT] = { 1.0, 1.0, 1.0 }                       ✔
  fg[INSENSITIVE] = { 0.80, 0.80, 0.80 }	
  fg[SELECTED] = { 0.80, 0.80, 0.80 }	
  
  bg[NORMAL] = { 0.35, 0.35, 0.40 }                      ✔
  bg[ACTIVE] = { 0.35, 0.35, 0.40 }                      ✗ changed
  bg[PRELIGHT] = "#565690"                               ✔
  bg[INSENSITIVE] = { 0.10, 0.10, 0.10 }                 ✔
  bg[SELECTED] = { 0.40, 0.40, 0.45 }                    ↻ ✗
  
  text[NORMAL] = { 0.80, 0.80, 0.80 }	                 ↻
  text[ACTIVE] = { 0.80, 0.80, 0.80 }                    ↻
  text[PRELIGHT] = { 0.80, 0.80, 0.80 }                  ↻
  text[INSENSITIVE] = { 0.80, 0.80, 0.80}                ↻
  text[SELECTED] = { 1.0, 1.0, 1.0 }                     ✗ changed
  
  base[ACTIVE]     = "#272a2f"
  base[NORMAL]      =  "#1a1e20"                         ✔
  base[PRELIGHT]     = { 0.20, 0.20, 0.20 }              ↻
  base[INSENSITIVE]  = "#4c5159"                         ✗
  base[SELECTED]     = { 0.25, 0.25, 0.25 }              ✗ changed

  engine "clearlooks" 
  {
    menubarstyle      = 2       # 0 = flat, 1 = sunken, 2 = flat gradient
#    menuitemstyle     = 1       # 0 = flat, 1 = 3d-ish (gradient), 2 = 3d-ish (button)
#    listviewitemstyle = 1       # 0 = flat, 1 = 3d-ish (gradient)
#    progressbarstyle  = 1       # 0 = candy bar, 1 = fancy candy bar, 2 = flat
  }
}

*/
/* ---------- Styles for Standard Widgets ---------- */

GtkComboBox {
    background-color: @field_color;
}
/*
style "default_buttons_menus" 
{
  fg[ACTIVE] = { 1.0, 1.0, 1.0 }
  
  bg[NORMAL] = { 0.30, 0.30, 0.35 }
  bg[ACTIVE] = "#565690"
  bg[PRELIGHT] = { 0.15, 0.15, 0.20 }
  bg[INSENSITIVE] = { 0.15, 0.15, 0.20 }
  bg[SELECTED] = { 0.15, 0.15, 0.20 }	
}

style "lumiera_adjusters" = "default_buttons_menus"
{
  fg[NORMAL] = { 0.80, 0.80, 0.80 } 
  fg[ACTIVE] = { 0.80, 0.80, 0.80 } 
  fg[PRELIGHT] = { 1.0, 1.0, 1.0 }
  fg[INSENSITIVE] = { 0.80, 0.80, 0.80 } 
  fg[SELECTED] = { 0.80, 0.80, 0.80 } 

  bg[NORMAL] = { 0.35, 0.35, 0.40 }
  bg[ACTIVE] = { 0.35, 0.35, 0.40 }
  bg[PRELIGHT] = "#565690"
  bg[INSENSITIVE] = { 0.10, 0.10, 0.10 }
  bg[SELECTED] = { 0.35, 0.35, 0.40 }
}

style "lumiera_progressbars" = "default_buttons_menus"
{ 
  bg[NORMAL] = { 0, 0, 0 }
  bg[PRELIGHT] = { 0.00, 0.36, 0.40 }
}

style "lumiera_button" = "default_buttons_menus"
{
	xthickness = 1
	ythickness = 1
}

style "tearoff_arrow" = "medium_bold_entry"
{
	fg[NORMAL] = { 0.80, 0.80, 0.80 }
	fg[PRELIGHT] = { 0.80, 0.80, 0.80 }
	bg[NORMAL] = { 0.80, 0.80, 0.80 }
	bg[PRELIGHT] = { 0.80, 0.80, 0.80 }
}

class "GtkWidget" style:highest "default_base"
class "GtkScrollbar" style:highest "lumiera_adjusters"
class "GtkLabel" style:highest "default_buttons_menus"
class "GtkButton" style:highest "lumiera_button"
class "GtkArrow" style:highest "tearoff_arrow"
class "GtkProgressBar" style:highest "lumiera_progressbars"
*/



/* ---------- Styles for Lumiera Widgets ---------- */
/*
style "timeline_body"
{
  gtkmm__CustomObject_TimelineBody::background = "#7E838B"
  gtkmm__CustomObject_TimelineBody::selection = "#2D2D90"
  gtkmm__CustomObject_TimelineBody::selection_alpha = 0.5
  gtkmm__CustomObject_TimelineBody::playback_point = "#006000"
}

style "timeline_ruler" = "default_base"
{
  font_name = "sans 8"
  gtkmm__CustomObject_TimelineRuler::height = 18
  gtkmm__CustomObject_TimelineRuler::major_tick_height = 18
  gtkmm__CustomObject_TimelineRuler::minor_long_tick_height = 6
  gtkmm__CustomObject_TimelineRuler::minor_short_tick_height = 3
  gtkmm__CustomObject_TimelineRuler::annotation_horz_margin = 3
  gtkmm__CustomObject_TimelineRuler::annotation_vert_margin = 0
  gtkmm__CustomObject_TimelineRuler::min_division_width = 100
  gtkmm__CustomObject_TimelineRuler::mouse_chevron_size = 5
  gtkmm__CustomObject_TimelineRuler::selection_chevron_size = 5
  
  gtkmm__CustomObject_TimelineRuler::playback_point_colour = "#006000"
  gtkmm__CustomObject_TimelineRuler::playback_point_alpha = 0.5
  gtkmm__CustomObject_TimelineRuler::playback_point_size = 12
  
  gtkmm__CustomObject_TimelineRuler::playback_period_arrow_colour = "#2D2D90"
  gtkmm__CustomObject_TimelineRuler::playback_period_arrow_alpha = 0.5
  gtkmm__CustomObject_TimelineRuler::playback_period_arrow_size = 10
  gtkmm__CustomObject_TimelineRuler::playback_period_arrow_stem_size = 3
}

style "timeline_header_widget" = "default_base"
{
  gtkmm__CustomObject_TimelineHeaderWidget::margin = 4
  gtkmm__CustomObject_TimelineHeaderWidget::expand_button_size = 12
}

class "gtkmm__CustomObject_TimelineBody" style:highest "timeline_body"
class "gtkmm__CustomObject_TimelineRuler" style:highest "timeline_ruler"
class "gtkmm__CustomObject_TimelineHeaderWidget" style:highest "timeline_header_widget"

*/


/* ---------- Styles for special markup ---------- */

  .indication-flash,
  .indication-flash * {
    background-color: shade(@hover_bg_color, 1.6);
}
  .indication-flash text {
    border: 4px solid red;
}