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     .makeColumn(4);
 262     margin-left: 4*@gridGutterWidth + 14;
 263
 264     &.narrow {
 265         .makeColumn(3);
 266         margin-left: 4*@gridGutterWidth + 14;
 267     }
 268
 269     input[type=text], input[type=password] {
 270         width: 3*@gridColumnWidth + 4*@gridGutterWidth + 5;
 271     }
 272 }
 273
 274 /* generic form styles */
 275 input, textarea, .form-widget {
 276     background-color: @white;
 277     color: @gray;
 278     border-color: @black;
 279 }
 280
 281 #forms {
 282     .input, input {
 283         #font.main();
 284         border: 1px solid @gray;
 285         height:21px;
 286         display: inline-block;
 287         margin-bottom: -1px;
 288         padding: 0.8em;
 289         padding-left: 1.5em;
 290         z-index: 2;
 291         &:focus {
 292             position: relative;
 293             border: 1px solid #000;
 294             z-index: 100;
 295
 296             label {
 297                 z-index: 300;
 298             }
 299         }
 300     }
 301 }
 302
 303 .altcol {
 304     background-color: @altColor !important;
 305
 306     &:hover {
 307         background-color: @linkColor !important;
 308     }
 309 }
 310
 311 .section {
 312
 313     em {
 314         color: @blue;
 315     }
 316
 317     &.positioned {
 318         margin-bottom: 0;
 319         .content {
 320             .makeColumn(4);
 321         }
 322
 323         img {
 324         }
 325
 326         &.withimg {
 327             .img {
 328                 .makeColumn(4);
 329             }
 330
 331             img {
 332                 float: left;
 333             }
 334         }
 335
 336         h3 {
 337             font-size: 1.2em;
 338             margin-bottom: @verticalSpacing;
 339         }
 340
 341         .text {
 342             color: @black;
 343         }
 344     }
 345
 346     margin-bottom: 3*@verticalSpacing;
 347
 348     .left, .right {
 349         width: 50%;
 350         float: left;
 351     }
 352
 353     &.imagelist {
 354         margin-top: 2em;
 355         .clearfix();
 356         img {
 357             float: left;
 358             margin-right: 4em;
 359             vertical-align: middle;
 360         }
 361     }
 362 }
 363
 364 input[readonly=true] {
 365     background-color: #ddd;
 366     color: darken(#ddd, 50%);
 367 }
 368
 369 form.withlabels {
 370     label {
 371         width: 3*@gridColumnWidth + 2*@gridGutterWidth;
 372         display: block;
 373         float: left;
 374         padding-top: 1em;
 375     }
 376
 377     input[type=text], input[type=password], textarea {
 378         width: 3*@gridColumnWidth + 2*@gridGutterWidth;
 379
 380         &.long {
 381             width: 3*@gridColumnWidth + 2*@gridGutterWidth;
 382         }
 383     }
 384 }
 385
 386
 387 .login-section {
 388     a.button {
 389         margin-bottom: 0.2*@gridColumnWidth;
 390
 391         &:last-child {
 392             margin-bottom: none;
 393         }
 394
 395         &.withicon {
 396             background-repeat: no-repeat;
 397             background-position: 15px 50%;
 398             padding-left: 40px;
 399         }
 400     }
 401
 402     &.loggedin {
 403         padding-bottom: 0 !important;
 404         background-image: none !important;
 405     }
 406 }
 407
 408
 409 @errorColor: lighten(@red, 30%);
 410 // forms
 411 form {
 412
 413     &.login {
 414         margin-bottom: 1.5*@verticalSpacing;
 415     }
 416
 417     h2 {
 418         color: @black;
 419         margin-bottom: @verticalSpacing;
 420         font-size: 1.1em;
 421
 422         span {
 423             padding-bottom: 3px;
 424         }
 425     }
 426
 427     .form-row {
 428         min-height: 2*@verticalSpacing;
 429         position: relative;
 430         &.submit {
 431             margin-top: 1.5*@verticalSpacing;
 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         display: table;
 457         position: relative;
 458     }
 459
 460     textarea, input.text, input[type="text"], input[type="password"] {
 461         #forms.input();
 462     }
 463
 464     input.submit, input[type="submit"] {
 465         .button();
 466     }
 467
 468
 469     textarea {
 470         height: 200px;
 471         width: 350px !important;
 472     }
 473     .with-errors {
 474         input, textarea, select {
 475             color: @red;
 476         }
 477         label {
 478             color: @errorColor;
 479         }
 480     }
 481 }
 482
 483 .form-error {
 484     background-color: @red;
 485     color: #fff;
 486     font-size: 0.8em;
 487     padding: 5px 5px;
 488 }
 489
 490 .form-errors.all {
 491     .form-error {
 492         position: relative;
 493         border-radius: 0;
 494         margin-bottom: 1.3em;
 495         padding: 0.5em;
 496     }
 497 }
 498
 499 div.form-stacked {
 500     margin-bottom: 4em;
 501 }
 502 // content types
 503
 504 .rightcol .section {
 505     background-image: url("../images/dashed_border.png");
 506     background-repeat: repeat-x;
 507     background-position: left bottom;
 508     padding-bottom: 2*@verticalSpacing;
 509     margin-bottom: 2*@verticalSpacing;
 510
 511 }
 512
 513 .section {
 514     h2 {
 515         font-size: 1.1em;
 516         line-height: 1.3em;
 517         margin-bottom: 1.5*@verticalSpacing;
 518
 519         a {
 520             color: #4085A6;
 521             border: none;
 522             line-height: 1.3em;
 523         }
 524     }
 525
 526     h3 {
 527         font-size: 1.1em;
 528         line-height: 1.3em;
 529         margin-bottom: 1.5*@verticalSpacing;
 530     }
 531
 532     p {
 533         line-height: 1.7em;
 534     }
 535
 536     .section-img {
 537         margin-bottom: 1*@verticalSpacing;
 538     }
 539 }
 540
 541
 542 // page messages
 543 .messages {
 544     .makeColumn(10);
 545
 546     margin: 2em 0;
 547     background-color: #ddd;
 548     margin-left: 0;
 549     font-size: 1.1em;
 550     li {
 551         padding: 1em;
 552
 553         &.success { background-color: @green; color: @white }
 554         &.error { background-color: @red; color: @white }
 555         &.warning { background-color: #AF6906; color: @black }
 556     }
 557
 558     .warning {
 559         color: @white !important;
 560         a {
 561             color: inherit;
 562             font-weight: bold;
 563         }
 564     }
 565
 566 }
 567
 568 form.innerlabels label.checkbox-label {
 569     position: relative !important;
 570     margin-left: 10px !important;
 571     padding-top: 1em !important;
 572     top:7px !important;
 573     left:10px;
 574     cursor: pointer;
 575 }
 576
 577
 578
 579 // accounts specific styles
 580 .service-desc {
 581     margin-top: 4em;
 582
 583 }
 584
 585
 586 // invitations table
 587 table {
 588
 589     td.consumed {
 590         color: @red;
 591     }
 592
 593     tr.consumed {
 594         td.consumed {
 595             color: @green;
 596         }
 597     }
 598 }
 599
 600
 601 .row { .makeRow() }
 602
 603 // footer
 604 .footer {
 605     .clearfix();
 606     color: lighten(@gray, 20%);
 607     .transit();
 608
 609     a { .transit() }
 610
 611     &:hover {
 612         color: @gray !important;
 613         a {
 614             color: @gray !important;
 615         }
 616     }
 617
 618     a {
 619         color: lighten(@gray, 20%);
 620         text-decoration: none;
 621
 622         &:hover {
 623             color: #000 !important;
 624         }
 625     }
 626
 627     li {
 628         margin-bottom: @verticalSpacing/2;
 629
 630         &.header {
 631             margin-bottom: @verticalSpacing;
 632         }
 633     }
 634
 635     .col {
 636         .makeColumn(4);
 637         &:last-child, &.last {
 638             width: 140px;
 639             margin-right:0;
 640         }
 641     }
 642
 643     .top.row, .last.row {
 644         .makeRow();
 645         margin: 20px 0;
 646
 647         .col {
 648             .makeColumn(4);
 649
 650             &.first {
 651                 margin-left: 0 !important;
 652             }
 653             &.last {
 654                 .makeColumn(2);
 655             }
 656         }
 657     }
 658     .top.row {
 659         margin-top: 0;
 660     }
 661
 662     .last.row {
 663         text-align: left;
 664         font-size: 0.8em;
 665         margin-bottom: 0;
 666     }
 667
 668     .bottom.row {
 669         .col {
 670             .makeColumn(2);
 671             &:last-child, &.last {
 672                 width: 140px;
 673                 margin-right:0;
 674             }
 675         }
 676     }
 677 }
 678
 679
 680 /*pagination*/
 681 .pagination {
 682     a.page {
 683         display: inline !important;
 684
 685     }
 686 }
 687
 688 /*blog styles*/
 689 .blog-entries {
 690
 691 }
 692
 693 .blog-entry {
 694
 695     .section();
 696     .clearfix();
 697     margin-bottom: 2*@verticalSpacing;
 698
 699     .title {
 700         margin-bottom: 1em;
 701         font-size: 1.1em;
 702         line-height: 1.4em;
 703     }
 704
 705     .media {
 706         img {
 707             border: 1px solid @gray;
 708         }
 709     }
 710
 711     .intro-content, .content {
 712         margin-top: @verticalSpacing;
 713
 714         object {
 715             margin: @verticalSpacing 0;
 716         }
 717     }
 718
 719     .entry-info {
 720         font-size: 0.7em;
 721         margin-top: @verticalSpacing;
 722     }
 723
 724     &.single {
 725         .entry-info {
 726             margin-top: 0;
 727             margin-bottom: @verticalSpacing;
 728         }
 729     }
 730 }
 731
 732 .section.twitter-feed {
 733
 734     font-size: 1.1em;
 735     .tweet {
 736         &:last-child { margin-bottom:0; padding-bottom:0; border-bottom: none }
 737         line-height: 1.3em;
 738         font-size: 0.9em;
 739         margin-bottom: @verticalSpacing;
 740         color: @gray;
 741
 742         .date {
 743             display: block;
 744             font-size: 0.7em;
 745             a {
 746                 text-decoration: none !important;
 747                 border: none;
 748             }
 749         }
 750     }
 751 }
 752
 753 .pagination .page {
 754     margin-left: 0;
 755 }
 756
 757
 758 .entry-list {
 759
 760     .since {
 761         font-size: 0.8em;
 762     }
 763
 764     .title {
 765         margin-bottom: 1em;
 766     }
 767
 768     .content, .text {
 769         margin-bottom: 2em;
 770         font-size: 0.8em;
 771     }
 772 }
 773
 774
 775 .initially-hidden {
 776     display: none;
 777 }
 778
 779
 780 /* recaptcha */
 781 #recaptcha_widget_div {
 782     margin-top: 10px;
 783     margin-left: -4px;
 784
 785     #recaptcha_instructions_image {
 786         font-size: 0.8em;
 787         margin-bottom: 10px;
 788         display: block !important;
 789     }
 790
 791     th, td {
 792         line-height: 1;
 793     }
 794 }
 795
 796 .checkbox-widget.checked {
 797     background-color: #f00;
 798     background-image: url("../images/checkbox.png");
 799     background-position: 50% 50%;
 800 }
 801
 802 .checkbox-widget {
 803     border: 1px solid @gray;
 804     width: 25px;
 805     height: 25px;
 806     display: block;
 807     float: left;
 808     cursor: pointer;
 809     margin-top: @verticalSpacing/2 - 2;
 810 }
 811
 812
 813 // generic headings
 814 @hColor: @blue;
 815 .textcontent, .terms-content {
 816     h1 {
 817         font-size: 1.9em;
 818         margin-bottom: 0.2em;
 819         margin-top: 1.2em;
 820         color: @hColor;
 821
 822         &:first-child {
 823             margin-top: 0;
 824         }
 825     }
 826
 827     h2 {
 828         font-size: 1.6em;
 829         margin-bottom: 1.1em;
 830         margin-top: 1.1em;
 831
 832         &:first-child {
 833             margin-top: 0;
 834         }
 835         color: lighten(@hColor, 5%);
 836     }
 837
 838     h3 {
 839         font-size: 1.3em;
 840         margin-bottom: 1em;
 841         margin-top: 1em;
 842
 843         &:first-child {
 844             margin-top: 0;
 845         }
 846         color: lighten(@hColor, 5%);
 847     }
 848
 849     p {
 850         margin-bottom: 1em;
 851         line-height: 1.5em;
 852     }
 853
 854     .date {
 855         margin: 1em 0;
 856         font-size: 0.9em;
 857         margin-bottom: 2em;
 858         color: @gray;
 859     }
 860 }
 861