In this file we can create our styles and on the top we can declare variables which we will use later in our code. Windu recognizes variables in a special way.
You can learn more about less.css at http://lesscss.org/
We can define any variables, however only those starting with @e- are interprated by Windu.
In the second spot we can define editor type choosing from:
- @e-color-variablesname - color choice panel
- @e-normalsize-variablesname - size slider with 0-800 range and step of 10
- @e-smallsize-variablesname - size slider with 0-100 range and step of 1
- @e-fontsize-variablesname - size slider with 8-36 range and step of 1
Example CSS code
@e-fontsize-basic-font: 16px; @e-smallsize-padding: 20px; @e-smallsize-border-radius: 10px; @e-color-basic: #c49b06; @color-basic-light: (@e-color-basic + #333); @e-color-bg: #404040; @e-color-bg-container-box: #0d0d0d; body{ background-color: @e-color-bg; font-size: @e-fontsize-basic-font; line-height: 160%; color:difference(@e-color-bg-container-box, #ffffff); } h1,h2,h3,h4,h5,h6{ color:@color-basic-light!important; font-family: 'Open Sans', sans-serif; font-weight:300; } a{ color:@e-color-basic; -webkit-transition: all .06s ease-in-out; -moz-transition: all .06s ease-in-out; transition: all .06s ease-in-out; } a:hover{ color:@e-color-basic + #444; text-decoration: none; } h4,.carousel-caption h4 { font-size: (@e-fontsize-basic-font * 2); margin-bottom:@e-fontsize-basic-font; } .big-box{ background-color: @e-color-bg-container-box; -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1); margin-top:@e-smallsize-padding * 2; margin-bottom:(@e-smallsize-padding); -webkit-border-radius: @e-smallsize-border-radius; -moz-border-radius: @e-smallsize-border-radius; border-radius: @e-smallsize-border-radius; }