Ichthyostega
5b64507560
for sake of developement of the timeline body drawing code, several tweaks were added to make the impact of the styling stand out clearly. This changeset removes all those tweaks and restors the code to intended neutral behaviour Moreover, the cursom drawing of the timeline now requires some basic aids to be present in the stylesheet, otherwise the track structure will not be visible. Thus add some minimalistic styling to the "light-theme-complement"-stylesheet, mostly based on the usual predefined theme colours and some box-shadow settings. This is by no means an adequate graphical solution, yet it should be enough to get on with coding....
101 lines
2.7 KiB
CSS
101 lines
2.7 KiB
CSS
/*
|
|
lumiera-light-theme-complement.css - minimal supplement for GTK-3 light style sheet
|
|
|
|
Copyright (C) Lumiera.org
|
|
2018, Hermann Vosseler <Ichthyostega@web.de>
|
|
|
|
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.
|
|
|
|
* ********************************************************/
|
|
|
|
|
|
/* CSS stylesheet to provide the additional definitions
|
|
* required to run the Lumiera GTK UI with a typical
|
|
* "light" standard system theme
|
|
*/
|
|
|
|
|
|
|
|
|
|
/* ---------- Styles for Lumiera Widgets ---------- */
|
|
|
|
/* ElementBoxWidget and IDLabel within */
|
|
.idlabel .image-button {
|
|
min-width: unset;
|
|
min-height: unset;
|
|
padding: inherit;
|
|
}
|
|
.idlabel__icon image {
|
|
padding-left: 0.5ex;
|
|
}
|
|
|
|
|
|
/* ---------- Styles for special markup ---------- */
|
|
|
|
.indication-flash,
|
|
.indication-flash * {
|
|
background-color: LightYellow;
|
|
}
|
|
.indication-flash text {
|
|
border: 4px solid red;
|
|
}
|
|
|
|
/* profile structure of the track fork...
|
|
* within the timeline body display (right side)
|
|
*
|
|
* margin is used for padding above / below
|
|
* border is used to paint the slopes to nested scopes
|
|
* background is used within the track scopes
|
|
*/
|
|
@define-color lum_light alpha(shade(ivory, 1.1), 0.2);
|
|
@define-color lum_shade alpha(shade(cornsilk, 0.4), 0.2);
|
|
|
|
.timeline__page > .timeline__body fork.timeline__fork {
|
|
margin: 0px;
|
|
padding: 10px;
|
|
/* background-color: inherited */
|
|
border-style: solid;
|
|
box-shadow: inset 1px 2px 5px 1px @lum_shade;
|
|
border-bottom-color: @lum_light;
|
|
border-top-color: alpha(shade(mix(@theme_bg_color, steelblue, 0.07),0.85), 0.4);
|
|
}
|
|
fork.timeline__fork frame.timeline__ruler {
|
|
margin-top: 5px;
|
|
margin-bottom: 1.2ex;
|
|
padding: 5px;
|
|
background-color: @theme_bg_color;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
border-top-color: shade(@theme_bg_color, 1.2);
|
|
border-left-color: shade(@theme_bg_color, 1.1);
|
|
border-bottom-color: shade(mix(@theme_bg_color, steelblue, 0.1), 0.8);
|
|
border-right-color: shade(mix(@theme_bg_color, steelblue, 0.1), 0.9);
|
|
box-shadow: inset 2px 2px 5px 1px shade(@theme_bg_color, 1.2),
|
|
1px 2px 4px 2px shade(@theme_bg_color, 0.8);
|
|
}
|
|
.track-slope--deep1 {
|
|
border-width: 3px;
|
|
}
|
|
.track-slope--deep2 {
|
|
border-width: 5px;
|
|
}
|
|
.track-slope--deep3 {
|
|
border-width: 7px;
|
|
}
|
|
.track-slope--deep4 {
|
|
border-width: 8px;
|
|
}
|
|
.track-slope--verydeep {
|
|
border-width: 9px;
|
|
}
|
|
|
|
/* bracket structure to indicate track scopes
|
|
* - base width is derived from font 'em'
|
|
* - drawing is in (text) colour (TODO: selection state)
|
|
*/
|
|
.fork__bracket {
|
|
padding-left: 2px;
|
|
padding-right: 1px;
|
|
}
|