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 .roundbottom (@radius: 5px){ .rounded(0, 0, @radius, @radius); }
  25 .roundtop (@radius: 5px){ .rounded(@radius, @radius, 0, 0); }
  26
  27 .opaque(@v: 0.5){
  28         opacity: @v;
  29         -webkit-transition: all 0.2s ease-in-out;
  30         -moz-transition: all 0.2s ease-in-out;
  31         -o-transition: all 0.2s ease-in-out;
  32         -ms-transition: all 0.2s ease-in-out;
  33         transition: all 0.2s ease-in-out;
  34 }
  35
  36 a, a:link { color: @Link; text-decoration: none; }
  37 a:visited { color: @LinkVisited; text-decoration: none; }
  38 a:hover {color: @LinkHover; text-decoration: underline; }
  39
  40 .left { float: left; }
  41 .right { float: right; }
  42 .hidden { display: none; }
  43
  44 code {
  45         font-family: Courier, monospace;
  46         white-space: pre;
  47         display: block;
  48         overflow: auto;
  49         border: 1px solid #444;
  50         background: #EEE;
  51         color: #444;
  52         padding: 10px;
  53         margin-top: 20px;
  54 }
  55 /* tool */
  56
  57 .tool {
  58         height: auto; overflow: auto;
  59         .label { float: left;}
  60         .action { float: right; }
  61 }
  62
  63
  64
  65
  66 /* popup notifications */
  67 div.jGrowl div.notice {
  68         background: @NoticeBackgroundColor url("../../../images/icons/48/notice.png") no-repeat 5px center;
  69         color:  @NoticeColor;
  70         padding-left: 58px;
  71 }
  72 div.jGrowl div.info {
  73         background: @InfoBackgroundColor url("../../../images/icons/48/info.png") no-repeat 5px center;
  74         color:  @InfoColor;
  75         padding-left: 58px;
  76 }
  77
  78
  79
  80 /* header */
  81 header {
  82         position: fixed; left: 43%; right: 43%; top: 0px;
  83         margin: 0px; padding: 0px;
  84         /*width: 100%; height: 12px; */
  85         z-index: 110;
  86         color: @Grey1;
  87         #site-location {
  88                 display: none;
  89         }
  90
  91         #banner {
  92                 overflow: hidden;
  93             text-align: center;
  94                 width: 100%;
  95                 a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; }
  96                 #logo-img { height: 22px; margin-top:5px;}
  97                 #logo-text { font-size: 22px }
  98         }
  99 }
 100 /* nav */
 101 nav {
 102         width: 100%; height: 32px;
 103         position: fixed; left: 0px; top: 0px;
 104         padding: 0px;
 105         background-color: @NavbarBackground;
 106         color: @Grey1;
 107         z-index: 100;
 108         .shadow(0px, 0px);
 109
 110                 a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
 111
 112                 ul {
 113                         margin: 0px;
 114                         padding: 0px 20px;
 115                         li {
 116                                 list-style: none;
 117                                 margin: 0px; padding: 0px;
 118                                 float: left;
 119                                 .menu-popup{ left: 0px; right: auto; }
 120                         }
 121
 122                 }
 123
 124                 .nav-menu-icon {
 125                         position: relative;
 126                         height: 22px;
 127                         padding: 5px;
 128                         margin: 0px 10px;
 129                         .roundtop();
 130
 131                         &.selected {
 132                                 background-color: @NavbarSelectedBg;
 133                         }
 134
 135                                 img { width: 22px; height: 22px; }
 136                                 .nav-notify { top: 3px; }
 137                 }
 138
 139                 .nav-menu {
 140                         position: relative;
 141                         height: 16px;
 142                         padding: 5px;
 143                         margin: 3px 15px 0px;
 144                         font-size: 14px;
 145                         border-bottom: 3px solid @NavbarBackground;
 146                         &.selected {
 147                                 border-bottom: 3px solid @NavbarSelectedBorder;
 148                         }
 149
 150                 }
 151
 152                 .nav-notify {
 153                         display: none;
 154                         position: absolute;
 155                         background-color: @NavbarNotifBg;
 156                         .rounded();
 157                         font-size: 10px;
 158                         padding: 1px 3px;
 159                         top: 0px;
 160                         right: -10px;
 161                         min-width: 15px;
 162                         text-align: right;
 163
 164                                 &.show{ display: block; }
 165                 }
 166
 167
 168                 #nav-help-link,
 169                 #nav-search-link,
 170                 #nav-directory-link,
 171                 #nav-apps-link,
 172                 #nav-site-linkmenu {
 173                         float: right;
 174                         .menu-popup{ right: 0px; left: auto; }
 175                 }
 176
 177                 #nav-notifications-linkmenu.on .icon.s22.notify,
 178                 #nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/22/notify_on.png") }
 179                 #nav-apps-link.selected { background-color: @NavbarSelectedBg; }
 180 }
 181
 182
 183 ul.menu-popup {
 184         position: absolute;
 185         display: none;
 186         width: 10em;
 187         background: @MenuBg;
 188         color: @Menu;
 189         margin: 0px;
 190         padding: 0px;
 191         list-style: none;
 192         border: 3px solid @MenuBorder;
 193         z-index: 100000;
 194
 195         .shadow();
 196
 197                 a { display: block; color: @MenuItem; padding: 5px 10px; text-decoration: none;}
 198                 a:hover { background-color: @MenuItemHoverBg; }
 199                 .menu-sep  { border-top: 1px solid @MenuItemSeparator; }
 200                 li { float: none;  overflow: auto; height: auto; display: block; }
 201                 li img { float: left; width: 16px; height: 16px; padding-right: 5px;}
 202                 .empty {
 203                         padding: 5px;
 204                         text-align: center;
 205                         color: @MenuEmpty;
 206                 }
 207
 208 }
 209
 210 /* autocomplete popup */
 211 .acpopup {
 212         max-height:150px;
 213         background-color:@MenuBg;
 214         color: @Menu;
 215         border:1px solid #MenuBorder;
 216         overflow:auto;
 217         z-index:100000;
 218         .shadow();
 219 }
 220 .acpopupitem {
 221         color: @MenuItem; padding: 4px;
 222         clear:left;
 223         img {
 224                 float: left;
 225                 margin-right: 4px;
 226         }
 227         &.selected{
 228                 background-color: @MenuItemHoverBg;
 229         }
 230 }
 231
 232
 233 #nav-notifications-menu {
 234         width: 400px;
 235         img { float: left; margin-right: 5px; }
 236         .contactname { font-weight: bold; }
 237         .notif-when { font-size: 10px; color: @MenuItemDetail; display: block; }
 238 }
 239
 240
 241
 242
 243 /* aside */
 244 aside {
 245         display: table-cell;
 246         vertical-align: top;
 247         width: 200px;
 248         padding:0px 10px 0px 20px;
 249         border-right: 1px solid @AsideBorder;
 250
 251         .vcard {
 252                 .fn { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
 253                 .title { margin-bottom: 5px; }
 254                 dl { height: auto; overflow: auto; }
 255                 dt {float: left; margin-left: 0px; width: 35%; text-align: right; color: @VCardLabelColor; }
 256                 dd {float: left; margin-left: 4px; width: 60%;}
 257
 258         }
 259
 260         #profile-extra-links {
 261                 ul { padding: 0px; margin: 0px; }
 262                 li { padding: 0px; margin: 0px; list-style: none; }
 263         }
 264
 265         #dfrn-request-link {
 266                 display: block;
 267                 .rounded();
 268                 color: @AsideConnect;
 269                 background: @AsideConnectBg url('../../../images/connect-bg.png') no-repeat left center;
 270                 font-weight: bold;
 271                 text-transform:uppercase;
 272                 padding: 4px 2px 2px 35px;
 273
 274                 &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
 275         }
 276
 277         #profiles-menu { width: 20em; }
 278
 279
 280 }
 281
 282 #contact-block {
 283         overflow: auto; height: auto;
 284         .contact-block-h4 { float: left; margin: 5px 0px; }
 285         .allcontact-link { float: right; margin: 5px 0px; }
 286         .contact-block-content {
 287                 clear: both;
 288                 overflow: auto; height: auto;
 289         }
 290         .contact-block-link {
 291                 float: left;
 292                 margin: 0px 2px 2px 0px;
 293         }
 294 }
 295
 296
 297 /* widget */
 298 .widget {
 299         margin-bottom: 2em;
 300
 301         h3 { padding: 0px; margin: 2px;}
 302         .action { .opaque(0.1); }
 303         input.action { .opaque(0.5); }
 304         &:hover .title .action { .opaque(1); }
 305         .tool:hover .action { .opaque(1); }
 306         .tool:hover .action.ticked { .opaque(1); }
 307
 308         ul { padding: 0px;}
 309         ul li {padding-left: 16px; min-height: 16px; list-style: none; }
 310
 311         .tool.selected {
 312                 background: url('../../../images/selected.png') no-repeat left center;
 313         }
 314
 315         /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 316         .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
 317
 318 }
 319
 320 /* widget: search */
 321 #add-search-popup {
 322         width: 200px;
 323         top: 18px;
 324 }
 325
 326
 327 /* section */
 328 section {
 329         display: table-cell;
 330         vertical-align: top;
 331         width: 800px;
 332         padding:0px 20px 0px 10px;
 333 }
 334
 335 /* wall item */
 336 .tread-wrapper {
 337         background-color: @ThreadBackgroundColor;
 338         position: relative;
 339         padding: 10px;
 340         margin-bottom: 20px;
 341 }
 342 .wall-item-decor { position: absolute; left: 790px; top: -10px;  width: 16px;}
 343 .unstarred { display: none; }
 344
 345 .wall-item-container {
 346         display: table;
 347         width: 780px;
 348
 349         .wall-item-item,
 350         .wall-item-bottom { display: table-row; }
 351
 352         .wall-item-bottom { .opaque(0.5); }
 353         &:hover .wall-item-bottom { .opaque(1); }
 354         .wall-item-info {
 355                 display: table-cell;
 356                 vertical-align: top;
 357                 text-align: left;
 358                 width: 60px;
 359
 360                 .wall-item-photo-wrapper { position: relative; }
 361                 .wall-item-photo {
 362                         width: 48px; height: 48px;
 363                         overflow: hidden;
 364                         text-indent: -9999px;
 365                         display: block;
 366                         background: url(../../../images/icons/48/user.png) no-repeat center center;
 367                  }
 368
 369                 .wall-item-photo-menu-button {
 370                         display: none;
 371                         position: absolute;
 372                         left: -4px;
 373                         top: 28px;
 374                 }
 375                 .wall-item-photo-menu { display: none; }
 376
 377         }
 378         .wall-item-location {
 379                 word-wrap: break-word;
 380                 width: 50px;
 381         }
 382         .wall-item-content {
 383                 display: table-cell;
 384                 font-size: 12px;
 385                 max-width: 720px;
 386                 word-wrap: break-word;
 387         }
 388         .wall-item-content img { max-width: 710px; }
 389         .wall-item-links,
 390         .wall-item-actions {
 391                 display: table-cell;
 392                 vertical-align: middle;
 393
 394                 .icon {
 395                         .opaque(0.5);
 396                 }
 397                 .icon:hover  {
 398                         .opaque(1.0);
 399                 }
 400         }
 401
 402         .wall-item-ago { padding-right: 40px; }
 403         .wall-item-name { font-weight: bold; }
 404
 405         .wall-item-actions-author { float: left; width: 20em; margin-top: 0.5em; }
 406         .wall-item-actions-social { float: left; margin-top: 0.5em;
 407                 a { margin-right: 3em; }
 408          }
 409         .wall-item-actions-tools { float: right; width: 15%;
 410                 a { float: right; }
 411                 input { float: right; }
 412         }
 413
 414 }
 415
 416
 417 .wall-item-container.comment {
 418         /*margin-top: 50px;*/
 419         .wall-item-photo { width: 32px; height: 32px; margin-left: 16px;
 420                 background: url(../../../images/icons/22/user.png) no-repeat center center;
 421         }
 422         .wall-item-photo-menu-button {
 423                 top: 13px !important;
 424                 left: 10px !important;
 425         }
 426         .wall-item-links { padding-left: 12px; }
 427 }
 428
 429 .wall-item-comment-wrapper {
 430         margin: 30px 2em 2em 60px;
 431         .comment-edit-photo { display: none; }
 432         textarea {
 433                 height: 1em; width: 100%; font-size: 10px;
 434                 color: @CommentBoxEmptyColor;
 435                 border: 1px solid @CommentBoxEmptyBorderColor;
 436                 padding:0.3em;
 437         }
 438         .comment-edit-text-full {
 439                 font-size: 14px;
 440                 height: 4em;
 441                 color: @CommentBoxFullColor;
 442                 border: 1px solid @CommentBoxFullBorderColor;
 443         }
 444 }
 445
 446
 447
 448 .wall-item-tags { padding-top: 5px; }
 449 .tag {
 450         background: url("../../../images/tag_b.png") no-repeat center left;
 451         color: @TagColor;
 452         padding-left: 3px;
 453         a {
 454                 padding-right: 8px;
 455                 background: url("../../../images/tag.png") no-repeat center right;
 456                 color: @TagColor;
 457         }
 458 }
 459
 460
 461
 462 #profile-jot-wrapper {
 463         width: 100%;
 464         margin: 0px 2em 20px 0px;
 465
 466
 467 }
 468 .profile-jot-text {
 469         height: 1em; width: 100%; font-size: 10px;
 470         color: @CommentBoxEmptyColor;
 471         border: 1px solid @CommentBoxEmptyBorderColor;
 472         padding:0.3em;
 473 }
 474 #profile-jot-plugin-wrapper,
 475 #profile-jot-submit-wrapper {
 476         margin-top: 10px;
 477 }
 478
 479
 480 #profile-jot-submit {
 481         float: left;
 482 }
 483 #profile-upload-wrapper{
 484         float: left;
 485         margin-left: 10px;
 486 }
 487 #profile-attach-wrapper,
 488 #profile-rotator,
 489 #profile-link-wrapper,
 490 #profile-youtube-wrapper,
 491 #profile-video-wrapper,
 492 #profile-audio-wrapper,
 493 #profile-location-wrapper,
 494 #profile-nolocation-wrapper,
 495 #profile-title-wrapper {
 496         float: left;
 497         margin-left: 20px;
 498 }
 499
 500 #profile-jot-perms {
 501         float: left;
 502         margin-left: 35px;
 503         margin-right: 35px;
 504 }
 505
 506 #profile-jot-perms-end {
 507         /*clear: left;*/
 508         height: 20px;
 509 }
 510
 511 #profile-jot-plugin-end{
 512   clear: both;
 513 }
 514 .profile-jot-net {
 515         float: left;
 516         margin-right: 10px;
 517         margin-top: 5px;
 518         margin-bottom: 5px;
 519 }
 520
 521 #profile-jot-networks-end {
 522         clear: both;
 523 }
 524
 525 #profile-jot-end, #about-jot-end {
 526         margin-bottom: 15px;
 527 }
 528 #about-jot-submit-wrapper {
 529         margin-top: 15px;
 530 }
 531 /** buttons **/
 532 /*input[type="submit"] {
 533         border: 0px;
 534     background-color: @ButtonBackgroundColor;
 535     color: @ButtonColor;
 536     padding: 0px 10px;
 537         .rounded(5px);
 538     height: 18px;
 539 }*/
 540
 541
 542 /** acl **/
 543 #photo-edit-perms-select,
 544 #photos-upload-permissions-wrapper,
 545 #profile-jot-acl-wrapper{
 546         display:block!important;
 547 }
 548
 549
 550
 551 #acl-wrapper {
 552         width: 690px;
 553         float:left;
 554 }
 555 #acl-search {
 556         float:right;
 557         background: #ffffff url("../../../images/search_18.png") no-repeat right center;
 558         padding-right:20px;
 559 }
 560 #acl-showall {
 561         float: left;
 562         display: block;
 563         width: auto;
 564         height: 18px;
 565         background-color: #cccccc;
 566         background-image: url("../../../images/show_all_off.png");
 567         background-position: 7px 7px;
 568         background-repeat: no-repeat;
 569         padding: 7px 5px 0px 30px;
 570         color: #999999;
 571         .rounded(5px);
 572 }
 573 #acl-showall.selected {
 574         color: #000000;
 575         background-color: #ff9900;
 576         background-image: url("../../../images/show_all_on.png");
 577 }
 578
 579 #acl-list {
 580         height: 210px;
 581         border: 1px solid #cccccc;
 582         clear: both;
 583         margin-top: 30px;
 584         overflow: auto;
 585 }
 586 #acl-list-content {
 587
 588 }
 589 .acl-list-item {
 590         display: block;
 591         width: 150px;
 592         height: 30px;
 593         border: 1px solid #cccccc;
 594         margin: 5px;
 595         float: left;
 596 }
 597 .acl-list-item img{
 598         width:22px;
 599         height: 22px;
 600         float: left;
 601         margin: 4px;
 602 }
 603 .acl-list-item p { height: 12px; font-size: 10px; margin: 0px; padding: 2px 0px 1px; overflow: hidden;}
 604 .acl-list-item a {
 605         font-size: 8px;
 606         display: block;
 607         width: 40px;
 608         height: 10px;
 609         float: left;
 610         color: #999999;
 611         background-color: #cccccc;
 612         background-position: 3px 3px;
 613         background-repeat: no-repeat;
 614         margin-right: 5px;
 615         -webkit-border-radius: 2px ;
 616         -moz-border-radius: 2px;
 617         border-radius: 2px;
 618         padding-left: 15px;
 619 }
 620 #acl-wrapper a:hover {
 621         text-decoration: none;
 622         color:#000000;
 623 }
 624 .acl-button-show { background-image: url("../../../images/show_off.png"); }
 625 .acl-button-hide { background-image: url("../../../images/hide_off.png"); }
 626
 627 .acl-button-show.selected {
 628         color: #000000;
 629         background-color: #9ade00;
 630         background-image: url("../../../images/show_on.png");
 631 }
 632 .acl-button-hide.selected {
 633         color: #000000;
 634         background-color: #ff4141;
 635         background-image: url("../../../images/hide_on.png");
 636 }
 637 .acl-list-item.groupshow { border-color: #9ade00; }
 638 .acl-list-item.grouphide { border-color: #ff4141; }
 639 /** /acl **/
 640
 641 /** tab buttons **/
 642 ul.tabs {
 643     list-style-type: none;
 644     padding-bottom: 10px;
 645
 646     li {
 647         float: left;
 648         margin-left: 20px;
 649
 650         .active {
 651                         border-bottom: 1px solid @LinkVisited;
 652         }
 653     }
 654
 655 }
 656
 657
 658 /**
 659  * Form fields
 660  */
 661 .field {
 662         margin-bottom: 10px;
 663         padding-bottom: 10px;
 664         overflow: auto;
 665         width: 100%;
 666
 667
 668         label {
 669                 float: left;
 670                 width: 200px;
 671         }
 672
 673         input,
 674         textarea {
 675                 width: 400px;
 676         }
 677         textarea { height: 100px; }
 678         .field_help {
 679                 display: block;
 680                 margin-left: 200px;
 681                 color: #666666;
 682
 683         }
 684
 685
 686         .onoff {
 687                 float: left;
 688                 width: 80px;
 689         }
 690         .onoff a {
 691                 display: block;
 692                 border:1px solid #666666;
 693                 background-image:url("../../../images/onoff.jpg");
 694                 background-repeat: no-repeat;
 695                 padding: 4px 2px 2px 2px;
 696                 height: 16px;
 697                 text-decoration: none;
 698         }
 699         .onoff .off {
 700                 border-color:#666666;
 701                 padding-left: 40px;
 702                 background-position: left center;
 703                 background-color: #cccccc;
 704                 color: #666666;
 705                 text-align: right;
 706         }
 707         .onoff .on {
 708                 border-color:#204A87;
 709                 padding-right: 40px;
 710                 background-position: right center;
 711                 background-color: #D7E3F1;
 712                 color: #204A87;
 713                 text-align: left;
 714         }
 715         .hidden { display: none!important; }
 716
 717         &.radio .field_help { margin-left: 0px; }
 718 }
 719
 720
 721 /* page footer */
 722 footer { height: 100px; display: table-row; }