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 ///* fonts */
  38 // @font-face {
  39 //   font-family: "LiberationSans";
  40 //   src: local("Liberation Sans"),url( LiberationSans-Regular.ttf ) format("truetype");
  41 //   font-weight: bold; font-style: italic;
  42 // }
  43 //
  44 // @font-face {
  45 //   font-family: "LiberationSans";
  46 //   src: local("Liberation Sans"),url( LiberationSans-Bold.ttf ) format("truetype");
  47 //   font-weight: bold; font-style: normal;
  48 // }
  49 // @font-face {
  50 //   font-family: "LiberationSans";
  51 //   src:  local("Liberation Sans"),url( LiberationSans-Italic.ttf ) format("truetype");
  52 //   font-weight: normal; font-style: italic;
  53 // }
  54
  55
  56 /* global */
  57 body {
  58         font-family: Liberation Sans,helvetica,arial,clean,sans-serif;
  59         font-size: 12px;
  60         background-color: @Grey1;
  61         color: @Grey5;
  62         margin: 0px;
  63         display:table-row;
  64 }
  65
  66 .shadow(@x: 0px, @y: 5px){
  67    -webkit-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  68    -moz-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  69    box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  70 }
  71
  72 .rounded(@tr: 5px, @tl: 5px, @bl: 5px, @br: 5px){
  73         -moz-border-radius: @arguments;
  74         -webkit-border-radius: @arguments;
  75         border-radius: @arguments;
  76 }
  77
  78 .roundbottom (@radius: 5px){ .rounded(0, 0, @radius, @radius); }
  79 .roundtop (@radius: 5px){ .rounded(@radius, @radius, 0, 0); }
  80
  81 a, a:visited, a:link { color: @Blue3; text-decoration: none; }
  82 a:hover {text-decoration: underline; }
  83
  84 .left { float: left; }
  85 .right { float: right; }
  86
  87 /* icons */
  88
  89
  90 .icons(@size: 22) {
  91         &.notify { background-image: url("../../../images/icons/notify_off_@{size}.png"); }
  92         &.gear   { background-image: url("../../../images/icons/gear_@{size}.png"); }
  93 }
  94
  95
  96 .icon {
  97         background-color: transparent ;
  98         background-repeat: no-repeat;
  99         background-position: center center;
 100         display: block;
 101         overflow: hidden;
 102         text-indent: -9999px;
 103
 104         &.s22 {
 105                 width:22px; height: 22px;
 106                 padding: 1px;
 107                 .icons(22);
 108         }
 109
 110 }
 111
 112
 113
 114 /* header */
 115 header {
 116         position: fixed; left: 43%; right: 43%; top: 0px;
 117         margin: 0px; padding: 0px;
 118         /*width: 100%; height: 12px; */
 119         z-index: 110;
 120         color: @Grey1;
 121         #site-location {
 122                 /*font-size:8px;
 123                 float:left;
 124                 background-color: @Metalic3;
 125                 padding: 1px 5px;
 126                 margin-left: 20px;
 127                 .roundbottom()*/
 128                 display: none;
 129         }
 130
 131         #banner {
 132
 133             text-align: center;
 134                 width: 100%;
 135                 a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; }
 136                 #logo-img { height: 22px; margin-top:5px;}
 137                 #logo-text { font-size: 22px }
 138         }
 139 }
 140 /* nav */
 141 nav {
 142         width: 100%; height: 32px;
 143         position: fixed; left: 0px; top: 0px;
 144         padding: 0px;
 145         background-color: @Metalic4;
 146         color: @Grey1;
 147         z-index: 100;
 148         .shadow(0px, 0px);
 149
 150                 a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none;  }
 151
 152                 ul {
 153                         margin: 0px;
 154                         padding: 0px 20px;
 155                         li {
 156                                 list-style: none;
 157                                 margin: 0px; padding: 0px;
 158                                 float: left;
 159                                 .menu-popup{ left: 0px; right: auto; }
 160                         }
 161
 162                 }
 163
 164                 .nav-menu-icon {
 165                         position: relative;
 166                         height: 22px;
 167                         padding: 5px;
 168                         margin: 0px 10px;
 169                         .roundtop();
 170
 171                         &.selected {
 172                                 background-color: @Metalic3;
 173                         }
 174
 175                                 img { width: 22px; height: 22px; }
 176                                 .nav-notify { top: 3px; }
 177                 }
 178
 179                 .nav-menu {
 180                         position: relative;
 181                         height: 16px;
 182                         padding: 5px;
 183                         margin: 3px 15px 0px;
 184                         font-size: 14px;
 185                         border-bottom: 3px solid @Metalic4;
 186                         &.selected {
 187                                 border-bottom: 3px solid @Metalic2;
 188                         }
 189
 190                 }
 191
 192                 .nav-notify {
 193                         display: none;
 194                         position: absolute;
 195                         background-color: @Blue1;
 196                         .rounded();
 197                         font-size: 10px;
 198                         padding: 1px 3px;
 199                         top: 0px;
 200                         right: -10px;
 201                         min-width: 15px;
 202                         text-align: right;
 203
 204                                 &.show{ display: block; }
 205                 }
 206
 207
 208                 #nav-help-link,
 209                 #nav-search-link,
 210                 #nav-directory-link,
 211                 #nav-apps-link,
 212                 #nav-site-linkmenu {
 213                         float: right;
 214                         .menu-popup{ right: 0px; left: auto; }
 215                 }
 216
 217                 #nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/notify_on_22.png") }
 218
 219 }
 220
 221 ul.menu-popup {
 222         position: absolute;
 223         display: none;
 224         width: 10em;
 225         background: @Grey1;
 226         color: @Grey5;
 227         margin: 0px;
 228         padding: 0px;
 229         list-style: none;
 230         border: 3px solid @Metalic3;
 231         z-index: 100000;
 232
 233         .shadow();
 234
 235                 a { display: block; color: @Grey5; padding: 5px 10px;}
 236                 a:hover { background-color: @Metalic1; }
 237                 .menu-sep  { border-top: 1px solid @Metalic2; }
 238                 li { float: none;  overflow: auto; height: auto; display: block; }
 239
 240                 .empty {
 241                         padding: 5px;
 242                         text-align: center;
 243                         color: @Metalic2;
 244                 }
 245 }
 246
 247 #nav-notifications-menu {
 248         width: 400px;
 249         img { float: left; margin-right: 5px; }
 250         .contactname { font-weight: bold; }
 251         .notif-when { font-size: 10px; color: @Metalic2; display: block; }
 252 }
 253
 254
 255
 256
 257 /* aside */
 258 aside {
 259         display: table-cell;
 260         width: 200px;
 261         padding:50px 10px 0px 20px;
 262 }
 263
 264 /* section */
 265 section {
 266         display: table-cell;
 267         width: 800px;
 268         padding:50px 20px 0px 10px;
 269 }