lumiera_/research/gtk-style-experiment.css
Ichthyostega a508ad751f Investigation: clarify handling of CSS3 box-shadow for custom drawing
- CSS3 effects like box-shadow are applied with the StyleContext::render_background() function
  * first, an outset box-shadow is rendered _outside_ the box given as parameter to `render_background()`
  * then the box is filled with the background colour
  * and last, an inset box-shadow is rendered _inside_ the area of a would-be border,
    without rendering the border itself.
  * consequently we can not shade the border itself and we can not shade the content
2019-08-08 19:08:04 +02:00

53 lines
1.3 KiB
CSS

/*
gtk-style-experiment.css - investigate GTKs CSS implementation
Copyright (C) Lumiera.org
2019, 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 loaded by gtk-style-experiment.cpp on top of
* the system theme, with GTK_STYLE_PROVIDER_PRIORITY_APPLICATION
*/
/* ---------- Styles for Lumiera Widgets ---------- */
/* ---------- Styles for special markup ---------- */
/* special styling for the frame widget within the main window....
* This styling will be picked up by our custom drawing code
*/
frame.experiment {
margin: 2em 1ex 0;
border-style: inset;
border-color: IndianRed;
background-color: Lime;
box-shadow: inset 2px 2px 5px 1px DeepSkyBlue,
5px 5px 2px 10px DeepPink;
}
.track-slope-deep1 {
border-width: 5px;
}
.track-slope-deep2 {
border-width: 10px;
}
frame.track-slope-deep3 {
border-width: 14px;
border-color: Cyan;
}
.track-slope-deep4 {
border-width: 17px;
}
.track-slope-verydeep {
border-width: 20px;
}