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: 10px;
   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 .hidden { display: none; }
  35
  36
  37 .tool {
  38         height: auto; overflow: auto;
  39         .label { float: left;}
  40         .action { float: right; }
  41 }
  42
  43 /* popup notifications */
  44 div.jGrowl div.notice {
  45         background: @NoticeBackgroundColor url("../../../images/icons/48/notice.png") no-repeat 5px center;
  46         color:  @NoticeColor;
  47         padding-left: 58px;
  48 }
  49 div.jGrowl div.info {
  50         background: @InfoBackgroundColor url("../../../images/icons/48/info.png") no-repeat 5px center;
  51         color:  @InfoColor;
  52         padding-left: 58px;
  53 }
  54
  55
  56
  57 /* header */
  58 header {
  59         position: fixed; left: 43%; right: 43%; top: 0px;
  60         margin: 0px; padding: 0px;
  61         /*width: 100%; height: 12px; */
  62         z-index: 110;
  63         color: @Grey1;
  64         #site-location {
  65                 display: none;
  66         }
  67
  68         #banner {
  69
  70             text-align: center;
  71                 width: 100%;
  72                 a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; }
  73                 #logo-img { height: 22px; margin-top:5px;}
  74                 #logo-text { font-size: 22px }
  75         }
  76 }
  77 /* nav */
  78 nav {
  79         width: 100%; height: 32px;
  80         position: fixed; left: 0px; top: 0px;
  81         padding: 0px;
  82         background-color: @NavbarBackground;
  83         color: @Grey1;
  84         z-index: 100;
  85         .shadow(0px, 0px);
  86
  87                 a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
  88
  89                 ul {
  90                         margin: 0px;
  91                         padding: 0px 20px;
  92                         li {
  93                                 list-style: none;
  94                                 margin: 0px; padding: 0px;
  95                                 float: left;
  96                                 .menu-popup{ left: 0px; right: auto; }
  97                         }
  98
  99                 }
 100
 101                 .nav-menu-icon {
 102                         position: relative;
 103                         height: 22px;
 104                         padding: 5px;
 105                         margin: 0px 10px;
 106                         .roundtop();
 107
 108                         &.selected {
 109                                 background-color: @NavbarSelectedBg;
 110                         }
 111
 112                                 img { width: 22px; height: 22px; }
 113                                 .nav-notify { top: 3px; }
 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 @NavbarBackground;
 123                         &.selected {
 124                                 border-bottom: 3px solid @NavbarSelectedBorder;
 125                         }
 126
 127                 }
 128
 129                 .nav-notify {
 130                         display: none;
 131                         position: absolute;
 132                         background-color: @NavbarNotifBg;
 133                         .rounded();
 134                         font-size: 10px;
 135                         padding: 1px 3px;
 136                         top: 0px;
 137                         right: -10px;
 138                         min-width: 15px;
 139                         text-align: right;
 140
 141                                 &.show{ display: block; }
 142                 }
 143
 144
 145                 #nav-help-link,
 146                 #nav-search-link,
 147                 #nav-directory-link,
 148                 #nav-apps-link,
 149                 #nav-site-linkmenu {
 150                         float: right;
 151                         .menu-popup{ right: 0px; left: auto; }
 152                 }
 153
 154                 #nav-notifications-linkmenu.on .icon.s22.notify,
 155                 #nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/22/notify_on.png") }
 156                 #nav-apps-link.selected { background-color: @NavbarSelectedBg; }
 157 }
 158
 159
 160 ul.menu-popup {
 161         position: absolute;
 162         display: none;
 163         width: 10em;
 164         background: @MenuBg;
 165         color: @Menu;
 166         margin: 0px;
 167         padding: 0px;
 168         list-style: none;
 169         border: 3px solid @MenuBorder;
 170         z-index: 100000;
 171
 172         .shadow();
 173
 174                 a { display: block; color: @MenuItem; padding: 5px 10px; text-decoration: none;}
 175                 a:hover { background-color: @MenuItemHoverBg; }
 176                 .menu-sep  { border-top: 1px solid @MenuItemSeparator; }
 177                 li { float: none;  overflow: auto; height: auto; display: block; }
 178                 li img { float: left; width: 16px; height: 16px; padding-right: 5px;}
 179                 .empty {
 180                         padding: 5px;
 181                         text-align: center;
 182                         color: @MenuEmpty;
 183                 }
 184
 185 }
 186
 187 #nav-notifications-menu {
 188         width: 400px;
 189         img { float: left; margin-right: 5px; }
 190         .contactname { font-weight: bold; }
 191         .notif-when { font-size: 10px; color: @MenuItemDetail; display: block; }
 192 }
 193
 194
 195
 196
 197 /* aside */
 198 aside {
 199         display: table-cell;
 200         width: 200px;
 201         padding:0px 10px 0px 20px;
 202         border-right: 1px solid @AsideBorder;
 203
 204         .vcard {
 205                 .fn { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
 206                 .title { margin-bottom: 5px; }
 207                 dl { height: auto; overflow: auto; }
 208                 dt {float: left; margin-left: 0px; width: 35%; text-align: right; color: @VCardLabelColor; }
 209                 dd {float: left; margin-left: 4px; width: 60%;}
 210
 211         }
 212
 213         #profile-extra-links {
 214                 ul { padding: 0px; margin: 0px; }
 215                 li { padding: 0px; margin: 0px; list-style: none; }
 216         }
 217
 218         #dfrn-request-link {
 219                 display: block;
 220                 .rounded();
 221                 color: @AsideConnect;
 222                 background: @AsideConnectBg url('../../../images/connect-bg.png') no-repeat left center;
 223                 font-weight: bold;
 224                 text-transform:uppercase;
 225                 padding: 4px 2px 2px 35px;
 226
 227                 &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
 228         }
 229
 230         #profiles-menu { width: 20em; }
 231
 232 }
 233
 234 #contact-block {
 235         overflow: auto; height: auto;
 236         .contact-block-h4 { float: left; margin: 5px 0px; }
 237         .allcontact-link { float: right; margin: 5px 0px; }
 238         .contact-block-content {
 239                 clear: both;
 240                 overflow: auto; height: auto;
 241         }
 242         .contact-block-link {
 243                 float: left;
 244                 margin: 0px 2px 2px 0px;
 245         }
 246 }
 247
 248
 249
 250
 251 /* section */
 252 section {
 253         display: table-cell;
 254         width: 800px;
 255         padding:0px 20px 0px 10px;
 256 }
 257
 258 /* wall item */
 259 .tread-wrapper {
 260         background-color: @ThreadBackgroundColor;
 261         position: relative;
 262         padding: 10px;
 263         margin-bottom: 20px;
 264 }
 265 .wall-item-decor { position: absolute; left: 790px; top: -10px;  width: 16px;}
 266 .unstarred { display: none; }
 267
 268 .wall-item-container {
 269         display: table;
 270         width: 780px;
 271         margin-bottom: 10px;
 272
 273         .wall-item-item,
 274         .wall-item-bottom { display: table-row; }
 275         .wall-item-info {
 276                 display: table-cell;
 277                 vertical-align: top;
 278                 text-align: left;
 279                 width: 60px;
 280
 281                 .wall-item-photo-wrapper { position: relative; }
 282                 .wall-item-photo { width: 48px; height: 48px; }
 283
 284                 .wall-item-photo-menu-button {
 285                         display: none;
 286                         position: absolute;
 287                         left: -4px;
 288                         top: 28px;
 289                 }
 290                 .wall-item-photo-menu { display: none; }
 291
 292         }
 293         .wall-item-content {
 294                 display: table-cell;
 295                 font-size: 12px;
 296                 max-width: 720px;
 297                 word-wrap: break-word;
 298         }
 299         .wall-item-content img { max-width: 710px; }
 300         .wall-item-links,
 301         .wall-item-actions { display: table-cell; }
 302
 303         .wall-item-ago { padding-right: 40px; }
 304 }
 305 .wall-item-container.comment {
 306         .wall-item-photo { width: 32px; height: 32px; margin-left: 16px;}
 307         .wall-item-photo-menu-button {
 308                 top: 13px !important;
 309                 left: 10px !important;
 310         }
 311 }