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 .tool {
  36         height: auto; overflow: auto;
  37         .label { float: left;}
  38         .icon { float: right; }
  39 }
  40
  41 /* popup notifications */
  42 div.jGrowl div.notice {
  43         background: @NoticeBackgroundColor url("../../../images/icons/48/notice.png") no-repeat 5px center;
  44         color:  @NoticeColor;
  45         padding-left: 58px;
  46 }
  47 div.jGrowl div.info {
  48         background: @InfoBackgroundColor url("../../../images/icons/48/info.png") no-repeat 5px center;
  49         color:  @InfoColor;
  50         padding-left: 58px;
  51 }
  52
  53
  54
  55 /* header */
  56 header {
  57         position: fixed; left: 43%; right: 43%; top: 0px;
  58         margin: 0px; padding: 0px;
  59         /*width: 100%; height: 12px; */
  60         z-index: 110;
  61         color: @Grey1;
  62         #site-location {
  63                 display: none;
  64         }
  65
  66         #banner {
  67
  68             text-align: center;
  69                 width: 100%;
  70                 a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; }
  71                 #logo-img { height: 22px; margin-top:5px;}
  72                 #logo-text { font-size: 22px }
  73         }
  74 }
  75 /* nav */
  76 nav {
  77         width: 100%; height: 32px;
  78         position: fixed; left: 0px; top: 0px;
  79         padding: 0px;
  80         background-color: @NavbarBackground;
  81         color: @Grey1;
  82         z-index: 100;
  83         .shadow(0px, 0px);
  84
  85                 a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
  86
  87                 ul {
  88                         margin: 0px;
  89                         padding: 0px 20px;
  90                         li {
  91                                 list-style: none;
  92                                 margin: 0px; padding: 0px;
  93                                 float: left;
  94                                 .menu-popup{ left: 0px; right: auto; }
  95                         }
  96
  97                 }
  98
  99                 .nav-menu-icon {
 100                         position: relative;
 101                         height: 22px;
 102                         padding: 5px;
 103                         margin: 0px 10px;
 104                         .roundtop();
 105
 106                         &.selected {
 107                                 background-color: @NavbarSelectedBg;
 108                         }
 109
 110                                 img { width: 22px; height: 22px; }
 111                                 .nav-notify { top: 3px; }
 112                 }
 113
 114                 .nav-menu {
 115                         position: relative;
 116                         height: 16px;
 117                         padding: 5px;
 118                         margin: 3px 15px 0px;
 119                         font-size: 14px;
 120                         border-bottom: 3px solid @NavbarBackground;
 121                         &.selected {
 122                                 border-bottom: 3px solid @NavbarSelectedBorder;
 123                         }
 124
 125                 }
 126
 127                 .nav-notify {
 128                         display: none;
 129                         position: absolute;
 130                         background-color: @NavbarNotifBg;
 131                         .rounded();
 132                         font-size: 10px;
 133                         padding: 1px 3px;
 134                         top: 0px;
 135                         right: -10px;
 136                         min-width: 15px;
 137                         text-align: right;
 138
 139                                 &.show{ display: block; }
 140                 }
 141
 142
 143                 #nav-help-link,
 144                 #nav-search-link,
 145                 #nav-directory-link,
 146                 #nav-apps-link,
 147                 #nav-site-linkmenu {
 148                         float: right;
 149                         .menu-popup{ right: 0px; left: auto; }
 150                 }
 151
 152                 #nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/22/notify_on.png") }
 153                 #nav-apps-link.selected { background-color: @NavbarSelectedBg; }
 154 }
 155
 156
 157 ul.menu-popup {
 158         position: absolute;
 159         display: none;
 160         width: 10em;
 161         background: @MenuBg;
 162         color: @Menu;
 163         margin: 0px;
 164         padding: 0px;
 165         list-style: none;
 166         border: 3px solid @MenuBorder;
 167         z-index: 100000;
 168
 169         .shadow();
 170
 171                 a { display: block; color: @MenuItem; padding: 5px 10px;}
 172                 a:hover { background-color: @MenuItemHoverBg; }
 173                 .menu-sep  { border-top: 1px solid @MenuItemSeparator; }
 174                 li { float: none;  overflow: auto; height: auto; display: block; }
 175
 176                 .empty {
 177                         padding: 5px;
 178                         text-align: center;
 179                         color: @MenuEmpty;
 180                 }
 181 }
 182
 183 #nav-notifications-menu {
 184         width: 400px;
 185         img { float: left; margin-right: 5px; }
 186         .contactname { font-weight: bold; }
 187         .notif-when { font-size: 10px; color: @MenuItemDetail; display: block; }
 188 }
 189
 190
 191
 192
 193 /* aside */
 194 aside {
 195         display: table-cell;
 196         width: 200px;
 197         padding:0px 10px 0px 20px;
 198         border-right: 1px solid @AsideBorder;
 199
 200         .vcard {
 201                 .fn { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
 202                 .title { margin-bottom: 5px; }
 203                 dl { height: auto; overflow: auto; }
 204                 dt {float: left; margin-left: 0px; width: 35%; }
 205                 dd {float: left; margin-left: 4px; width: 60%;}
 206
 207         }
 208
 209         #profile-extra-links {
 210                 ul { padding: 0px; margin: 0px; }
 211                 li { padding: 0px; margin: 0px; list-style: none; }
 212         }
 213
 214         #dfrn-request-link {
 215                 display: block;
 216                 .rounded();
 217                 color: @AsideConnect;
 218                 background: @AsideConnectBg url('../../../images/connect-bg.png') no-repeat left center;
 219                 font-weight: bold;
 220                 text-transform:uppercase;
 221                 padding: 4px 2px 2px 35px;
 222
 223                 &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
 224         }
 225
 226 }
 227
 228 #contact-block {
 229         overflow: auto; height: auto;
 230         .contact-block-h4 { float: left; margin: 5px 0px; }
 231         .allcontact-link { float: right; margin: 5px 0px; }
 232         .contact-block-content {
 233                 clear: both;
 234                 overflow: auto; height: auto;
 235         }
 236         .contact-block-link {
 237                 float: left;
 238                 margin: 0px 2px 2px 0px;
 239         }
 240 }
 241
 242
 243
 244
 245 /* section */
 246 section {
 247         display: table-cell;
 248         width: 800px;
 249         padding:0px 20px 0px 10px;
 250 }
 251
 252