code.grnet.gr Git - astakos/blob - snf-astakos-app/astakos/im/static/im/css/styles.less

   1 @import "../less/bootstrap.less";
   2 @import "../less/django_forms.less";
   3 @import "../less/tables.less";
   4 @import "../less/xtra.less";
   5
   6
   7 // mixins
   8
   9 .border-box {
  10     -moz-box-sizing: border-box;
  11     -webkit-box-sizing: border-box;
  12     box-sizing: border-box;
  13     *behavior: url(boxsizing.htc);
  14 }
  15
  16 .clearme { .clearfix() }
  17
  18 @verticalSpacing: @gridGutterWidth/1.5;
  19 @gradCol: #ddd;
  20 body {
  21     #font.main();
  22     font-size: 12px;
  23 }
  24
  25 .topbar {
  26     background-color: @shadowColor;
  27     .head {
  28         float: left;
  29             padding: @verticalSpacing/2-5;
  30     }
  31     .links {
  32         .clearfix();
  33         a {
  34             color: @black;
  35             text-decoration: none;
  36             display: block;
  37             float: left;
  38             margin-left: 10px;
  39             padding: @verticalSpacing/2+1;
  40
  41             &:hover {
  42                 background-color: lighten(@black, 10%);
  43                 color: @white;
  44             }
  45         }
  46
  47         float: right;
  48     }
  49 }
  50
  51 // default link styles
  52 section a, p a, form a, .section a, .styledlinks a, a.styled {
  53     color: @black;
  54     text-decoration: none;
  55     border-bottom: 1px solid @linkColor;
  56
  57     &:hover {
  58         color: @linkColor;
  59     }
  60
  61     &.noborder {
  62         border: none;
  63     }
  64
  65     em {
  66         color: @blue;
  67     }
  68 }
  69
  70 a.simple {
  71     border: none;
  72
  73 }
  74 a.action {
  75     color: @linkColor;
  76     border-bottom: none;
  77 }
  78
  79 a img {
  80     border-bottom: none;
  81 }
  82
  83 // body borders
  84 .content-border {
  85     border-right: 1px solid @mainBorderColor;
  86     border-left: 1px solid @mainBorderColor;
  87 }
  88
  89 .hidden {
  90     display: none !important;
  91 }
  92
  93 // container sizing
  94 .container, .topbar, .footer {
  95     .fixed-container();
  96     .content-border();
  97     padding: 0 @siteWhiteSpace;
  98 }
  99
 100 .container {
 101     padding-bottom: @siteWhiteSpace;
 102     background-color: @white;
 103 }
 104
 105 .topbar {
 106 }
 107
 108
 109 div.header {
 110     position: relative;
 111     margin-top: 2.5*@verticalSpacing;
 112     margin-bottom: @verticalSpacing;
 113     h1 {
 114         color: @shadowColor;
 115         display: inline;
 116         font-size: 2.3em;
 117         border-bottom: 1px solid @shadowColor;
 118         padding-bottom: 3px;
 119     }
 120 }
 121 .mainlogo {
 122     height: 36px;
 123
 124     h1 { height: 36px }
 125     img {
 126         margin-left: -10px;
 127     }
 128 }
 129
 130 .footer {
 131     border-bottom: 1px solid @mainBorderColor;
 132     border-top: 1px solid lighten(@mainBorderColor, 15%);
 133     padding-top: @verticalSpacing;
 134     padding-bottom: @verticalSpacing;
 135 }
 136
 137 ul.inline {
 138     .clearfix();
 139     li {
 140         display: block;
 141         float: left;
 142         margin-right: 1em;
 143     }
 144 }
 145
 146 .mainnav.quicknav {
 147     position: absolute;
 148     right: 0;
 149     top: -2.6*@verticalSpacing;
 150     margin:0;
 151
 152     li {
 153         margin-right:0;
 154         margin-left: 1em;
 155     }
 156 }
 157
 158 .navigation {
 159     height: 83px;
 160     position: absolute;
 161     right: -15px;
 162     top: -23px;
 163 }
 164
 165 .mainnav {
 166     font-size: 1.3em;
 167
 168     &.subnav {
 169         margin-bottom: -@verticalSpacing;
 170         li {
 171             margin-top: 0.4*@verticalSpacing;
 172             float: right;
 173         }
 174     }
 175
 176     li {
 177         margin-top: 2*@verticalSpacing;
 178     }
 179
 180     li.active {
 181         a {
 182             /*border-bottom: 1px solid @linkColor;*/
 183             border-bottom: none;
 184             color: @linkColor;
 185         }
 186     }
 187     a {
 188         color: @black;
 189         text-decoration: none;
 190
 191         &:hover {
 192             border-bottom: 1px solid @linkColor;
 193         }
 194
 195         &.active, &:active {
 196             border-bottom: 1px solid @linkColor;
 197             color: @linkColor;
 198         }
 199     }
 200 }
 201
 202 .bottom-section {
 203     .clearfix();
 204
 205     .section {
 206         img {
 207             width: 200px;
 208         }
 209     }
 210 }
 211
 212 .top-section {
 213     .clearfix();
 214 }
 215
 216 div.page {
 217     .makeRow();
 218     margin-top: 5*@verticalSpacing;
 219     font-size: 1.1em;
 220     .page-inner {
 221         position: relative;
 222     }
 223 }
 224
 225 // columnlayout
 226 .maincol {
 227     position: relative;
 228     .makeColumn(5);
 229
 230     &.wide {
 231         .makeColumn(6);
 232     }
 233
 234     &.full {
 235         .makeRow();
 236         margin-left: 0;
 237         .makeColumn(10);
 238     }
 239
 240     .nextlink {
 241          margin-top: 60px;
 242          text-align: right;
 243          float: right;
 244          margin-right: 50px;
 245          font-size: 1.1em;
 246     }
 247
 248     .content-bottom { position: relative; .clearfix(); }
 249 }
 250
 251 .backlink {
 252     margin: 30px 0;
 253 }
 254
 255 .appbar {
 256     height: 30px;
 257     background-color: @blue;
 258 }
 259
 260 .rightcol {
 261     .offset(6.5);
 262     .columns(4);
 263
 264     &.narrow {
 265         .offset(7.5);
 266         .columns(3);
 267     }
 268     input[type=text], input[type=password] {
 269         width: 3*@gridColumnWidth + 4*@gridGutterWidth + 5;
 270     }
 271 }
 272
 273 /* generic form styles */
 274 input, textarea, .form-widget {
 275     background-color: @white;
 276     color: @gray;
 277     border-color: @black;
 278 }
 279
 280 #forms {
 281     .input, input {
 282         #font.main();
 283         border: 1px solid @gray;
 284         height:21px;
 285         display: inline-block;
 286         margin-bottom: -1px;
 287         padding: 0.8em;
 288         padding-left: 1.5em;
 289         z-index: 2;
 290         &:focus {
 291             position: relative;
 292             border: 1px solid #000;
 293             z-index: 100;
 294
 295             label {
 296                 z-index: 300;
 297             }
 298         }
 299     }
 300 }
 301
 302 .altcol {
 303     background-color: @altColor !important;
 304
 305     &:hover {
 306         background-color: @linkColor !important;
 307     }
 308 }
 309
 310 .section {
 311
 312     em {
 313         color: @blue;
 314     }
 315
 316     &.positioned {
 317         margin-bottom: 0;
 318         .content {
 319             .makeColumn(4);
 320         }
 321
 322         img {
 323         }
 324
 325         &.withimg {
 326             .img {
 327                 .makeColumn(4);
 328             }
 329
 330             img {
 331                 float: left;
 332             }
 333         }
 334
 335         h3 {
 336             font-size: 1.2em;
 337             margin-bottom: @verticalSpacing;
 338         }
 339
 340         .text {
 341             color: @black;
 342         }
 343     }
 344
 345     margin-bottom: 3*@verticalSpacing;
 346
 347     .left, .right {
 348         width: 50%;
 349         float: left;
 350     }
 351
 352     &.imagelist {
 353         margin-top: 2em;
 354         .clearfix();
 355         img {
 356             float: left;
 357             margin-right: 4em;
 358             vertical-align: middle;
 359         }
 360     }
 361 }
 362
 363 input[readonly=true] {
 364     background-color: #ddd;
 365     color: darken(#ddd, 50%);
 366 }
 367
 368 form.withlabels {
 369     label {
 370         width: 3*@gridColumnWidth + 2*@gridGutterWidth;
 371         display: block;
 372         float: left;
 373         padding-top: 1em;
 374     }
 375
 376     input[type=text], input[type=password], textarea {
 377         width: 3*@gridColumnWidth + 2*@gridGutterWidth;
 378
 379         &.long {
 380             width: 3*@gridColumnWidth + 2*@gridGutterWidth;
 381         }
 382     }
 383 }
 384
 385
 386 .login-section {
 387     a.button {
 388         margin-bottom: 0.2*@gridColumnWidth;
 389
 390         &:last-child {
 391             margin-bottom: none;
 392         }
 393
 394         &.withicon {
 395             background-repeat: no-repeat;
 396             background-position: 15px 50%;
 397             padding-left: 40px;
 398         }
 399     }
 400
 401     &.loggedin {
 402         padding-bottom: 0 !important;
 403         background-image: none !important;
 404     }
 405 }
 406
 407
 408 @errorColor: lighten(@red, 30%);
 409 // forms
 410 form {
 411
 412     &.login {
 413         margin-bottom: 1.5*@verticalSpacing;
 414     }
 415
 416     h2 {
 417         color: @black;
 418         margin-bottom: @verticalSpacing;
 419         font-size: 1.1em;
 420
 421         span {
 422             padding-bottom: 3px;
 423         }
 424     }
 425
 426     .form-row {
 427         min-height: 2*@verticalSpacing;
 428         position: relative;
 429         &.submit {
 430             margin-top: 1.5*@verticalSpacing;
 431             z-index: 10;
 432         }
 433
 434         .extra-link {
 435             color: @gray;
 436             text-decoration: none;
 437             border: none;
 438             font-size: 0.8em;
 439             margin-top: 1.3em;
 440             float: right;
 441         }
 442
 443         label {
 444             font-size: 1.1em;
 445         }
 446     }
 447
 448     &.innerlabels label {
 449         position: absolute;
 450         top: 1.1em;
 451         left: 1.5em;
 452         color: #aaa;
 453     }
 454
 455     &.innerlabels p {
 456         position: relative;
 457     }
 458
 459     textarea, input.text, input[type="text"], input[type="password"] {
 460         #forms.input();
 461     }
 462
 463     input.submit, input[type="submit"] {
 464         .button();
 465     }
 466
 467
 468     textarea {
 469         height: 200px;
 470         width: 350px !important;
 471     }
 472     .with-errors {
 473         input, textarea, select {
 474             color: @red;
 475         }
 476         label {
 477             color: @errorColor;
 478         }
 479     }
 480 }
 481
 482 .form-error {
 483     background-color: @red;
 484     color: #fff;
 485     font-size: 0.8em;
 486     padding: 5px 5px;
 487 }
 488
 489 .form-errors.all {
 490     .form-error {
 491         position: relative;
 492         border-radius: 0;
 493         margin-bottom: 1.3em;
 494         padding: 0.5em;
 495     }
 496 }
 497
 498 div.form-stacked {
 499     margin-bottom: 4em;
 500 }
 501 // content types
 502
 503 .rightcol .section {
 504     background-image: url("../images/dashed_border.png");
 505     background-repeat: repeat-x;
 506     background-position: left bottom;
 507     padding-bottom: 2*@verticalSpacing;
 508     margin-bottom: 2*@verticalSpacing;
 509
 510 }
 511
 512 .section {
 513     h2 {
 514         font-size: 1.1em;
 515         line-height: 1.3em;
 516         margin-bottom: 1.5*@verticalSpacing;
 517
 518         a {
 519             color: #4085A6;
 520             border: none;
 521             line-height: 1.3em;
 522         }
 523     }
 524
 525     h3 {
 526         font-size: 1.1em;
 527         line-height: 1.3em;
 528         margin-bottom: 1.5*@verticalSpacing;
 529     }
 530
 531     p {
 532         line-height: 1.7em;
 533     }
 534
 535     .section-img {
 536         margin-bottom: 1*@verticalSpacing;
 537     }
 538 }
 539
 540
 541 // page messages
 542 .messages {
 543     .makeColumn(10);
 544
 545     margin: 2em 0;
 546     background-color: #ddd;
 547     margin-left: 0;
 548     font-size: 1.1em;
 549     li {
 550         padding: 1em;
 551
 552         &.success { background-color: @green; color: @white }
 553         &.error { background-color: @red; color: @white }
 554         &.warning { background-color: #AF6906; color: @black }
 555     }
 556
 557     .warning {
 558         color: @white !important;
 559         a {
 560             color: inherit;
 561             font-weight: bold;
 562         }
 563     }
 564
 565 }
 566
 567 // accounts specific styles
 568 .service-desc {
 569     margin-top: 4em;
 570
 571 }
 572
 573
 574 // invitations table
 575 table {
 576
 577     td.consumed {
 578         color: @red;
 579     }
 580
 581     tr.consumed {
 582         td.consumed {
 583             color: @green;
 584         }
 585     }
 586 }
 587
 588
 589 .row { .makeRow() }
 590
 591 // footer
 592 .footer {
 593     .clearfix();
 594     color: lighten(@gray, 20%);
 595     .transit();
 596
 597     a { .transit() }
 598
 599     &:hover {
 600         color: @gray !important;
 601         a {
 602             color: @gray !important;
 603         }
 604     }
 605
 606     a {
 607         color: lighten(@gray, 20%);
 608         text-decoration: none;
 609
 610         &:hover {
 611             color: #000 !important;
 612         }
 613     }
 614
 615     li {
 616         margin-bottom: @verticalSpacing/2;
 617
 618         &.header {
 619             margin-bottom: @verticalSpacing;
 620         }
 621     }
 622
 623     .col {
 624         .makeColumn(4);
 625         &:last-child, &.last {
 626             width: 140px;
 627             margin-right:0;
 628         }
 629     }
 630
 631     .top.row, .last.row {
 632         .makeRow();
 633         margin: 20px 0;
 634
 635         .col {
 636             .makeColumn(4);
 637
 638             &.first {
 639                 margin-left: 0 !important;
 640             }
 641             &.last {
 642                 .makeColumn(2);
 643             }
 644         }
 645     }
 646     .top.row {
 647         margin-top: 0;
 648     }
 649
 650     .last.row {
 651         text-align: left;
 652         font-size: 0.8em;
 653         margin-bottom: 0;
 654     }
 655
 656     .bottom.row {
 657         .col {
 658             .makeColumn(2);
 659             &:last-child, &.last {
 660                 width: 140px;
 661                 margin-right:0;
 662             }
 663         }
 664     }
 665 }
 666
 667
 668 /*pagination*/
 669 .pagination {
 670     a.page {
 671         display: inline !important;
 672
 673     }
 674 }
 675
 676 /*blog styles*/
 677 .blog-entries {
 678
 679 }
 680
 681 .blog-entry {
 682
 683     .section();
 684     .clearfix();
 685     margin-bottom: 2*@verticalSpacing;
 686
 687     .title {
 688         margin-bottom: 1em;
 689         font-size: 1.1em;
 690         line-height: 1.4em;
 691     }
 692
 693     .media {
 694         img {
 695             border: 1px solid @gray;
 696         }
 697     }
 698
 699     .intro-content, .content {
 700         margin-top: @verticalSpacing;
 701
 702         object {
 703             margin: @verticalSpacing 0;
 704         }
 705     }
 706
 707     .entry-info {
 708         font-size: 0.7em;
 709         margin-top: @verticalSpacing;
 710     }
 711
 712     &.single {
 713         .entry-info {
 714             margin-top: 0;
 715             margin-bottom: @verticalSpacing;
 716         }
 717     }
 718 }
 719
 720 .section.twitter-feed {
 721
 722     font-size: 1.1em;
 723     .tweet {
 724         &:last-child { margin-bottom:0; padding-bottom:0; border-bottom: none }
 725         line-height: 1.3em;
 726         font-size: 0.9em;
 727         margin-bottom: @verticalSpacing;
 728         color: @gray;
 729
 730         .date {
 731             display: block;
 732             font-size: 0.7em;
 733             a {
 734                 text-decoration: none !important;
 735                 border: none;
 736             }
 737         }
 738     }
 739 }
 740
 741 .pagination .page {
 742     margin-left: 0;
 743 }
 744
 745
 746 .entry-list {
 747
 748     .since {
 749         font-size: 0.8em;
 750     }
 751
 752     .title {
 753         margin-bottom: 1em;
 754     }
 755
 756     .content, .text {
 757         margin-bottom: 2em;
 758         font-size: 0.8em;
 759     }
 760 }
 761
 762
 763 .initial_hidden {
 764     display: none;
 765 }
 766
 767
 768 /* recaptcha */
 769 #recaptcha_widget_div {
 770     margin-top: 10px;
 771     margin-left: -4px;
 772
 773     #recaptcha_instructions_image {
 774         font-size: 0.8em;
 775         margin-bottom: 10px;
 776         display: block !important;
 777     }
 778
 779     th, td {
 780         line-height: 1;
 781     }
 782 }
 783
 784 .checkbox-widget.checked {
 785     background-color: #f00;
 786     background-image: url("../images/checkbox.png");
 787     background-position: 50% 50%;
 788 }
 789
 790 .checkbox-widget {
 791     border: 1px solid @gray;
 792     width: 25px;
 793     height: 25px;
 794     display: block;
 795     float: left;
 796     cursor: pointer;
 797     margin-top: @verticalSpacing/2 - 2;
 798 }
 799
 800
 801