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;
}
