view/theme/quattro/quattro.less

   1 // Quattro Theme LESS file
   2
   3 /* global */
   4 body {
   5         font-family: Liberation Sans,helvetica,arial,clean,sans-serif;
   6         font-size: 12px;
   7         background-color: @BodyBackground;
   8         color: @BodyColor;
   9         margin: 50px 0px 0px 0px;
  10         display:table;
  11 }
  12
  13 .shadow(@x: 0px, @y: 5px){
  14    -webkit-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  15    -moz-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  16    box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  17 }
  18
  19 .rounded(@tr: 5px, @tl: 5px, @bl: 5px, @br: 5px){
  20         -moz-border-radius: @arguments;
  21         -webkit-border-radius: @arguments;
  22         border-radius: @arguments;
  23 }
  24
  25 .roundbottom (@radius: 5px){ .rounded(0, 0, @radius, @radius); }
  26 .roundtop (@radius: 5px){ .rounded(@radius, @radius, 0, 0); }
  27
  28 a, a:link { color: @Link; text-decoration: none; }
  29 a:visited { color: @LinkVisited; text-decoration: none; }
  30 a:hover {color: @LinkHover; text-decoration: underline; }
  31
  32 .left { float: left; }
  33 .right { float: right; }
  34
  35 /* icons */
  36
  37
  38 .icons(@size: 22) {
  39         &.notify { background-image: url("../../../images/icons/notify_off_@{size}.png"); }
  40         &.gear   { background-image: url("../../../images/icons/gear_@{size}.png"); }
  41 }
  42
  43
  44 .icon {
  45         background-color: transparent ;
  46         background-repeat: no-repeat;
  47         background-position: center center;
  48         display: block;
  49         overflow: hidden;
  50         text-indent: -9999px;
  51
  52         &.s22 {
  53                 width:22px; height: 22px;
  54                 padding: 1px;
  55                 .icons(22);
  56         }
  57
  58 }
  59
  60
  61
  62 /* header */
  63 header {
  64         position: fixed; left: 43%; right: 43%; top: 0px;
  65         margin: 0px; padding: 0px;
  66         /*width: 100%; height: 12px; */
  67         z-index: 110;
  68         color: @Grey1;
  69         #site-location {
  70                 display: none;
  71         }
  72
  73         #banner {
  74
  75             text-align: center;
  76                 width: 100%;
  77                 a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; }
  78                 #logo-img { height: 22px; margin-top:5px;}
  79                 #logo-text { font-size: 22px }
  80         }
  81 }
  82 /* nav */
  83 nav {
  84         width: 100%; height: 32px;
  85         position: fixed; left: 0px; top: 0px;
  86         padding: 0px;
  87         background-color: @NavbarBackground;
  88         color: @Grey1;
  89         z-index: 100;
  90         .shadow(0px, 0px);
  91
  92                 a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
  93
  94                 ul {
  95                         margin: 0px;
  96                         padding: 0px 20px;
  97                         li {
  98                                 list-style: none;
  99                                 margin: 0px; padding: 0px;
 100                                 float: left;
 101                                 .menu-popup{ left: 0px; right: auto; }
 102                         }
 103
 104                 }
 105
 106                 .nav-menu-icon {
 107                         position: relative;
 108                         height: 22px;
 109                         padding: 5px;
 110                         margin: 0px 10px;
 111                         .roundtop();
 112
 113                         &.selected {
 114                                 background-color: @NavbarSelectedBg;
 115                         }
 116
 117                                 img { width: 22px; height: 22px; }
 118                                 .nav-notify { top: 3px; }
 119                 }
 120
 121                 .nav-menu {
 122                         position: relative;
 123                         height: 16px;
 124                         padding: 5px;
 125                         margin: 3px 15px 0px;
 126                         font-size: 14px;
 127                         border-bottom: 3px solid @NavbarBackground;
 128                         &.selected {
 129                                 border-bottom: 3px solid @NavbarSelectedBorder;
 130                         }
 131
 132                 }
 133
 134                 .nav-notify {
 135                         display: none;
 136                         position: absolute;
 137                         background-color: @NavbarNotifBg;
 138                         .rounded();
 139                         font-size: 10px;
 140                         padding: 1px 3px;
 141                         top: 0px;
 142                         right: -10px;
 143                         min-width: 15px;
 144                         text-align: right;
 145
 146                                 &.show{ display: block; }
 147                 }
 148
 149
 150                 #nav-help-link,
 151                 #nav-search-link,
 152                 #nav-directory-link,
 153                 #nav-apps-link,
 154                 #nav-site-linkmenu {
 155                         float: right;
 156                         .menu-popup{ right: 0px; left: auto; }
 157                 }
 158
 159                 #nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/notify_on_22.png") }
 160                 #nav-apps-link.selected { background-color: @NavbarSelectedBg; }
 161 }
 162
 163
 164 ul.menu-popup {
 165         position: absolute;
 166         display: none;
 167         width: 10em;
 168         background: @MenuBg;
 169         color: @Menu;
 170         margin: 0px;
 171         padding: 0px;
 172         list-style: none;
 173         border: 3px solid @MenuBorder;
 174         z-index: 100000;
 175
 176         .shadow();
 177
 178                 a { display: block; color: @MenuItem; padding: 5px 10px;}
 179                 a:hover { background-color: @MenuItemHoverBg; }
 180                 .menu-sep  { border-top: 1px solid @MenuItemSeparator; }
 181                 li { float: none;  overflow: auto; height: auto; display: block; }
 182
 183                 .empty {
 184                         padding: 5px;
 185                         text-align: center;
 186                         color: @MenuEmpty;
 187                 }
 188 }
 189
 190 #nav-notifications-menu {
 191         width: 400px;
 192         img { float: left; margin-right: 5px; }
 193         .contactname { font-weight: bold; }
 194         .notif-when { font-size: 10px; color: @MenuItemDetail; display: block; }
 195 }
 196
 197
 198
 199
 200 /* aside */
 201 aside {
 202         display: table-cell;
 203         width: 200px;
 204         padding:0px 10px 0px 20px;
 205         border-right: 1px solid @AsideBorder;
 206
 207         .vcard {
 208                 .fn { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
 209                 .title { margin-bottom: 5px; }
 210                 dl { height: auto; overflow: auto; }
 211                 dt {float: left; margin-left: 0px; width: 35%; }
 212                 dd {float: left; margin-left: 4px; width: 60%;}
 213
 214         }
 215
 216         #profile-extra-links {
 217                 ul { padding: 0px; margin: 0px; }
 218                 li { padding: 0px; margin: 0px; list-style: none; }
 219         }
 220
 221         #dfrn-request-link {
 222                 display: block;
 223                 .rounded();
 224                 color: @AsideConnect;
 225                 background: @AsideConnectBg url('../../../images/connect-bg.png') no-repeat left center;
 226                 font-weight: bold;
 227                 text-transform:uppercase;
 228                 padding: 4px 2px 2px 35px;
 229
 230                 &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
 231         }
 232
 233 }
 234
 235
 236
 237
 238 /* section */
 239 section {
 240         display: table-cell;
 241         width: 800px;
 242         padding:0px 20px 0px 10px;
 243 }