view/theme/quattro/style.less

   1 /**
   2  * Fabio Comuni <http://kirgroup.com/profile/fabrixxm>
   3  **/
   4 // Less file http://lesscss.org/
   5 // compile with lessc
   6 // $ lessc style.less > style.css
   7
   8 // "Echo" palette from Inkscape
   9 @Blue1:rgb(25,174,255);
  10 @Blue2:rgb(0,132,200);
  11 @Blue3:rgb(0,92,148);
  12 @Red1:rgb(255,65,65);
  13 @Red2:rgb(220,0,0);
  14 @Red3:rgb(181,0,0);
  15 @Orange1:rgb(255,255,62);
  16 @Orange2:rgb(255,153,0);
  17 @Orange3:rgb(255,102,0);
  18 @Brown1:rgb(255,192,34);
  19 @Brown2:rgb(184,129,0);
  20 @Brown3:rgb(128,77,0);
  21 @Green1:rgb(204,255,66);
  22 @Green2:rgb(154,222,0);
  23 @Green3:rgb(0,145,0);
  24 @Purple1:rgb(241,202,255);
  25 @Purple2:rgb(215,108,255);
  26 @Purple3:rgb(186,0,255);
  27 @Metalic1:rgb(189,205,212);
  28 @Metalic2:rgb(158,171,176);
  29 @Metalic3:rgb(54,78,89);
  30 @Metalic4:rgb(14,35,46);
  31 @Grey1:rgb(255,255,255);
  32 @Grey2:rgb(204,204,204);
  33 @Grey3:rgb(153,153,153);
  34 @Grey4:rgb(102,102,102);
  35 @Grey5:rgb(45,45,45);
  36
  37
  38
  39 /* fonts */
  40 @font-face {
  41   font-family: "LiberationSans";
  42   src: local("Liberation Sans"), url( LiberationSans-Regular.ttf ) format("truetype");
  43   font-weight: normal; font-style: normal;
  44 }
  45 @font-face {
  46   font-family: "LiberationSans";
  47   src: local("Liberation Sans"), url( LiberationSans-Bold.ttf ) format("truetype");
  48   font-weight: bold; font-style: normal;
  49 }
  50 @font-face {
  51   font-family: "LiberationSans";
  52   src: local("Liberation Sans"), url( LiberationSans-Italic.ttf ) format("truetype");
  53   font-weight: normal; font-style: italic;
  54 }
  55
  56 /* global */
  57 body {
  58         font-family: LiberationSans,helvetica,arial,freesans,clean,sans-serif;
  59         font-size: 12px;
  60         background-color: #FFFFFF;
  61         color: @Grey5;
  62         margin: 0px;
  63 }
  64
  65 .rounded(@tr: 5px, @tl: 5px, @bl: 5px, @br: 5px){
  66         -moz-border-radius: @arguments;
  67         -webkit-border-radius: @arguments;
  68         border-radius: @arguments;
  69 }
  70
  71 .roundbottom (@radius: 5px){ .rounded(0, 0, @radius, @radius); }
  72 .roundtop (@radius: 5px){ .rounded(@radius, @radius, 0, 0); }
  73
  74 a, a:visited, a:link { color: @Blue3; text-decoration: none; }
  75 a:hover {text-decoration: underline; }
  76
  77 .left { float: left; }
  78 .right { float: right; }
  79
  80 /* nav */
  81 nav {
  82         width: 100%; height: 50px;
  83         background-color: @Metalic4;
  84         color: #FFFFFF;
  85         a, a:visited, a:link, a:hover { color: #FFFFFF; text-decoration: none; }
  86
  87         #site-location {
  88                 font-size:8px;
  89                 float:left;
  90                 background-color: @Metalic3;
  91                 padding: 1px 5px;
  92                 margin-left: 20px;
  93                 .roundbottom()
  94         }
  95
  96         #nav {
  97                 clear: both;
  98                 padding: 0px 20px;
  99                 height: auto;
 100                 padding-top: 6px;
 101
 102                 .nav-menu-icon {
 103                         position: relative;
 104                         height: 22px;
 105                         padding: 5px;
 106                         margin: 0px 10px;
 107                         .roundtop();
 108
 109                         &.selected {
 110                                 background-color: @Metalic3;
 111                         }
 112
 113                         img { width: 22px; height: 22px; }
 114                 }
 115
 116                 .nav-menu {
 117                         position: relative;
 118                         height: 16px;
 119                         padding: 5px;
 120                         margin: 3px 15px 0px;
 121                         font-size: 14px;
 122                         border-bottom: 3px solid @Metalic4;
 123                         &.selected {
 124                                 border-bottom: 3px solid @Metalic2;
 125                         }
 126
 127                         .nav-notify {
 128                                 position: absolute;
 129                                 background-color: @Blue1;
 130                                 .rounded();
 131                                 font-size: 10px;
 132                                 padding: 1px 3px;
 133                                 top: 0px;
 134                                 right: -10px;
 135                                 min-width: 15px;
 136                             text-align: right;
 137                         }
 138
 139                 }
 140
 141         }
 142 }
 143
 144 ul.menu-popup {
 145         position: absolute;
 146         /*display: none;*/
 147         width: auto;
 148         background: #FFFFFF;
 149         color: @Grey5;
 150         margin: 0px;
 151         padding: 0px;
 152         list-style: none;
 153         border: 3px solid @Metalic3;
 154         a { display: block; color: @Grey5; padding: 5px 10px;}
 155         a:hover { background-color: @Metalic1; }
 156         z-index: 100000;
 157
 158         .menu-sep  {
 159                 border-top: 1px solid @Metalic2;
 160         }
 161 }
 162 .left .menu-popup{ left: 0px; }
 163 .right .menu-popup{ right: 0px; }
 164
 165 /* icons */
 166
 167
 168 .icons(@size: 22) {
 169         &.notify_off { background-image: url("../../../images/icons/notify_off_@{size}.png"); }
 170         &.notify_on  { background-image: url("../../../images/icons/notify_on_@{size}.png"); }
 171 }
 172
 173
 174 .icon {
 175         background-color: transparent ;
 176         background-repeat: no-repeat;
 177         background-position: center center;
 178         display: block;
 179
 180         &.s22 {
 181                 width:22px; height: 22px;
 182                 .icons(22);
 183         }
 184
 185 }
 186
 187
 188
 189 /* aside */
 190 aside { display: none; }
 191
 192 /* section */
 193 section { display: none;}