over time, a specific Lumiera code writing style has emerged. The GUI, as it stood, used somewhat different conventions, which now have been aligned to the common standard. Basically we use GNU style, with some adjustments for OO-programming, we prefer CamelCase, and write TypeNames uppercase, variableNames lowercase
278 lines
8.1 KiB
CSS
278 lines
8.1 KiB
CSS
/*
|
|
gtk-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);
|
|
|
|
|
|
* {
|
|
engine: adwaita;
|
|
|
|
border-width: 1px;
|
|
border-style: outset;
|
|
border-color: shade(@bg_color, 0.80);
|
|
|
|
color: inherit; /* by default inherit content colour from parent widget */
|
|
}
|
|
|
|
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"
|
|
|
|
*/
|