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