benn/lumiera_
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lumiera_/research/gtk-style-experiment.css

54 lines
1.3 KiB
CSS
Raw Normal View History

Investigation: install a custom stylesheet
2019-07-31 23:27:33 +02:00
/*
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 {
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-04 17:00:18 +02:00
margin: 2em 1ex 0;
Investigation: get the border resizing to work ...as it turns out, a problem with Cascading prevented the additional classes to become effective
2019-08-03 15:45:36 +02:00
border-style: inset;
border-color: IndianRed;
Investigation: install a custom stylesheet
2019-07-31 23:27:33 +02:00
background-color: Lime;
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-04 17:00:18 +02:00
box-shadow: inset 2px 2px 5px 1px DeepSkyBlue,
5px 5px 2px 10px DeepPink;
Investigation: get the border resizing to work ...as it turns out, a problem with Cascading prevented the additional classes to become effective
2019-08-03 15:45:36 +02:00
}
.track-slope-deep1 {
border-width: 5px;
Investigation: install a custom stylesheet
2019-07-31 23:27:33 +02:00
}
.track-slope-deep2 {
border-width: 10px;
}
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-04 17:00:18 +02:00
frame.track-slope-deep3 {
Investigation: install a custom stylesheet
2019-07-31 23:27:33 +02:00
border-width: 14px;
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-04 17:00:18 +02:00
border-color: Cyan;
Investigation: install a custom stylesheet
2019-07-31 23:27:33 +02:00
}
.track-slope-deep4 {
border-width: 17px;
}
.track-slope-verydeep {
border-width: 20px;
}
Reference in a new issue Copy permalink