Ichthyostega
e5371f66b8
Note however, we will not plaster our UI code and CSS with mangled-out selectors on each and every single element. This is what cascading was meant to be used for.
288 lines
8.3 KiB
CSS
288 lines
8.3 KiB
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;
|
|
}
|