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
   5
   6 @gradCol: #ddd;
   7 body {
   8     #font.main();
   9 }
  10
  11 .topbar {
  12     background-color: @shadowColor;
  13     .head {
  14         float: left;
  15             padding: @gridGutterWidth/2-5;
  16     }
  17     .links {
  18         .clearfix();
  19         a {
  20             color: @black;
  21             text-decoration: none;
  22             display: block;
  23             float: left;
  24             margin-left: 10px;
  25             padding: @gridGutterWidth/2+1;
  26
  27             &:hover {
  28                 background-color: lighten(@black, 10%);
  29                 color: @white;
  30             }
  31         }
  32
  33         float: right;
  34     }
  35 }
  36
  37 // default link styles
  38 section a, p a, form a, .section a {
  39     color: @black;
  40     text-decoration: none;
  41     border-bottom: 1px solid @linkColor;
  42
  43     &:hover {
  44         color: @linkColor;
  45     }
  46
  47     &.noborder {
  48         border: none;
  49     }
  50
  51     em {
  52         color: @blue;
  53     }
  54 }
  55
  56 a.action {
  57     color: @linkColor;
  58     border-bottom: none;
  59 }
  60
  61 a img {
  62     border-bottom: none;
  63 }
  64
  65 // body borders
  66 .content-border {
  67     border-right: 1px solid @mainBorderColor;
  68     border-left: 1px solid @mainBorderColor;
  69 }
  70
  71 .hidden {
  72     display: none !important;
  73 }
  74
  75 // container sizing
  76 .container, .topbar, .footer {
  77     .fixed-container();
  78     .content-border();
  79     padding: 0 @siteWhiteSpace;
  80 }
  81
  82 .container {
  83     padding-bottom: @siteWhiteSpace;
  84     background-color: @white;
  85 }
  86
  87 .topbar {
  88 }
  89
  90
  91 div.header {
  92     position: relative;
  93     margin-top: 42px;
  94     margin-bottom: @gridGutterWidth;
  95     h1 {
  96         color: @shadowColor;
  97         display: inline;
  98         font-size: 2.3em;
  99         border-bottom: 1px solid @shadowColor;
 100         padding-bottom: 3px;
 101     }
 102 }
 103 .mainlogo {
 104     img {
 105         margin-left: -10px;
 106     }
 107 }
 108
 109 .footer {
 110     border-bottom: 1px solid @mainBorderColor;
 111     border-top: 1px solid lighten(@mainBorderColor, 15%);
 112     padding-top: @gridGutterWidth;
 113     padding-bottom: @gridGutterWidth;
 114 }
 115
 116 ul.inline {
 117     .clearfix();
 118     li {
 119         display: block;
 120         float: left;
 121         margin-right: 1em;
 122     }
 123 }
 124
 125 .mainnav.quicknav {
 126     position: absolute;
 127     right: 0;
 128     top: -2.6*@gridGutterWidth;
 129     margin:0;
 130
 131     li {
 132         margin-right:0;
 133         margin-left: 1em;
 134     }
 135 }
 136
 137
 138 .mainnav {
 139     font-size: 1.1em;
 140
 141     &.subnav {
 142         margin-bottom: -@gridGutterWidth;
 143         li {
 144             margin-top: @gridGutterWidth/2;
 145         }
 146     }
 147
 148     li {
 149         margin-top: 3*@gridGutterWidth;
 150     }
 151
 152     li.active {
 153         a {
 154             /*border-bottom: 1px solid @linkColor;*/
 155             border-bottom: none;
 156             color: @linkColor;
 157         }
 158     }
 159     a {
 160         color: @black;
 161         text-decoration: none;
 162
 163         &:hover {
 164             border-bottom: 1px solid @linkColor;
 165         }
 166
 167         &.active, &:active {
 168             border-bottom: 1px solid @linkColor;
 169             color: @linkColor;
 170         }
 171     }
 172 }
 173
 174 .page {
 175     .makeRow();
 176     margin-top: 42px;
 177     font-size: 1.1em;
 178     .page-inner {
 179         position: relative;
 180     }
 181 }
 182
 183 // columnlayout
 184 .maincol {
 185     .makeColumn(5);
 186
 187     &.wide {
 188         .makeColumn(6);
 189     }
 190
 191     &.full {
 192         .makeRow();
 193         margin-left: 0;
 194         .makeColumn(10);
 195     }
 196 }
 197
 198 .appbar {
 199     height: 30px;
 200     background-color: @blue;
 201 }
 202
 203 .rightcol {
 204     .offset(6.5);
 205     .columns(4);
 206
 207     &.narrow {
 208         .offset(7.5);
 209         .columns(3);
 210     }
 211     input[type=text], input[type=password] {
 212         width: 3*@gridColumnWidth + 4*@gridGutterWidth + 5;
 213     }
 214 }
 215
 216
 217 /* recaptcha */
 218 #recaptcha_widget_div {
 219     margin-top: 10px;
 220     margin-left: -4px;
 221
 222     #recaptcha_instructions_image {
 223         font-size: 0.8em;
 224         margin-bottom: 10px;
 225         display: block !important;
 226     }
 227 }
 228 /* generic form styles */
 229 input, textarea, .form-widget {
 230     background-color: @white;
 231     color: @black;
 232     border-color: @black;
 233 }
 234
 235 .checkbox-widget.checked {
 236     background-color: #f00;
 237     background-image: url("../images/checkbox.png");
 238     background-position: 50% 50%;
 239 }
 240
 241 .checkbox-widget {
 242     border: 1px solid @gray;
 243     width: 25px;
 244     height: 25px;
 245     display: block;
 246     float: left;
 247     cursor: pointer;
 248     margin-top: @gridGutterWidth/2 - 2;
 249 }
 250
 251 #forms {
 252     .input, input {
 253         #font.main();
 254         border: 1px solid @gray;
 255         margin-bottom: -1px;
 256         padding: 0.8em;
 257         padding-left: 1.5em;
 258         z-index: 2;
 259
 260         &:focus {
 261             position: relative;
 262             border: 1px solid #000;
 263             z-index: 100;
 264         }
 265     }
 266 }
 267
 268 .altcol {
 269     background-color: @altColor !important;
 270
 271     &:hover {
 272         background-color: @linkColor !important;
 273     }
 274 }
 275
 276 .section {
 277
 278     &.positioned {
 279
 280         .content {
 281             .makeColumn(4);
 282         }
 283
 284         img {
 285         }
 286
 287         &.withimg {
 288             .img {
 289                 .makeColumn(4);
 290             }
 291
 292             img {
 293                 float: left;
 294             }
 295         }
 296
 297         h3 {
 298             margin-bottom: @gridGutterWidth;
 299         }
 300
 301         .text {
 302             color: @black;
 303         }
 304     }
 305
 306     margin-bottom: 2em;
 307
 308     .left, .right {
 309         width: 50%;
 310         float: left;
 311     }
 312
 313     &.imagelist {
 314         margin-top: 2em;
 315         .clearfix();
 316         img {
 317             float: left;
 318             margin-right: 4em;
 319             vertical-align: middle;
 320         }
 321     }
 322 }
 323
 324 input[readonly=true] {
 325     background-color: #ddd;
 326     color: darken(#ddd, 70%);
 327 }
 328
 329 form.withlabels {
 330     label {
 331         width: 3*@gridColumnWidth + 2*@gridGutterWidth;
 332         display: block;
 333         float: left;
 334         padding-top: 1em;
 335     }
 336
 337     input[type=text], input[type=password], textarea {
 338         width: 3*@gridColumnWidth + 2*@gridGutterWidth;
 339
 340         &.long {
 341             width: 3*@gridColumnWidth + 2*@gridGutterWidth;
 342         }
 343     }
 344 }
 345
 346
 347 @errorColor: lighten(@red, 30%);
 348 // forms
 349 form {
 350
 351     &.login {
 352         margin-bottom: 3em;
 353     }
 354
 355     h2 {
 356         color: @black;
 357         margin-bottom: @gridGutterWidth;
 358         font-size: 1.1em;
 359
 360         span {
 361             padding-bottom: 3px;
 362         }
 363     }
 364
 365     .form-row {
 366         min-height: 2*@gridGutterWidth;
 367         position: relative;
 368         &.submit {
 369             margin-top: @gridGutterWidth;
 370         }
 371
 372         .extra-link {
 373             color: @gray;
 374             text-decoration: none;
 375             border: none;
 376             font-size: 0.8em;
 377             margin-top: 1.3em;
 378             float: right;
 379         }
 380     }
 381
 382     &.innerlabels label {
 383         position: absolute;
 384         top:1em;
 385         left:1.5em;
 386         color: #aaa;
 387     }
 388
 389     &.innerlabels p {
 390         position: relative;
 391     }
 392
 393     textarea, input.text, input[type="text"], input[type="password"] {
 394         #forms.input();
 395     }
 396
 397     input.submit, input[type="submit"] {
 398         .button();
 399     }
 400
 401
 402     .with-errors {
 403         input, textarea, select {
 404             color: @red;
 405         }
 406         label {
 407             color: @errorColor;
 408         }
 409     }
 410 }
 411
 412 .form-error {
 413     background-color: @red;
 414     color: #fff;
 415     font-size: 0.8em;
 416     padding: 5px 5px;
 417 }
 418
 419 .form-errors.all {
 420     .form-error {
 421         position: relative;
 422         border-radius: 0;
 423         margin-bottom: 1.3em;
 424         padding: 0.5em;
 425     }
 426 }
 427
 428 div.form-stacked {
 429     margin-bottom: 4em;
 430 }
 431 // content types
 432 .section {
 433     h2 {
 434         font-size: 1.1em;
 435         margin-bottom: 1.5*@gridGutterWidth;
 436
 437         a {
 438             color: #4085A6;
 439             border: none;
 440         }
 441     }
 442
 443     p {
 444         line-height: 1.7em;
 445     }
 446 }
 447
 448
 449 // page messages
 450 .messages {
 451     .makeColumn(10);
 452
 453     margin-bottom: 2em;
 454     background-color: #ddd;
 455
 456     li {
 457         padding: 1em;
 458
 459         &.success { background-color: @green; color: @white }
 460         &.error { background-color: @red; color: @white }
 461         &.warning { background-color: @yellow; color: @black }
 462     }
 463
 464 }
 465
 466 // accounts specific styles
 467 .service-desc {
 468     margin-top: 4em;
 469
 470 }
 471
 472
 473 // invitations table
 474 table {
 475
 476     td.consumed {
 477         color: @red;
 478     }
 479
 480     tr.consumed {
 481         td.consumed {
 482             color: @green;
 483         }
 484     }
 485 }
 486
 487
 488 .row { .makeRow() }
 489
 490 // footer
 491 .footer {
 492     .makeRow()
 493
 494     &:hover {
 495         a {
 496             color: @gray !important;
 497             .transit();
 498         }
 499     }
 500
 501     a {
 502         color: lighten(@gray, 20%);
 503         .transit();
 504         text-decoration: none;
 505
 506         &:hover {
 507             color: darken(@gray, 50%);
 508         }
 509     }
 510
 511     li {
 512         margin-bottom: @gridGutterWidth/2;
 513
 514         &.header {
 515             margin-bottom: @gridGutterWidth;
 516         }
 517     }
 518
 519     .col {
 520         .makeColumn(4);
 521         &:last-child, &.last {
 522             width: 140px;
 523             margin-right:0;
 524         }
 525     }
 526
 527     .bottom.row {
 528         .col {
 529             .makeColumn(2);
 530             &:last-child, &.last {
 531                 width: 140px;
 532                 margin-right:0;
 533             }
 534         }
 535     }
 536 }
 537
 538
 539 /*pagination*/
 540
 541
 542 /*blog styles*/
 543 .blog-entries {
 544
 545 }
 546
 547 .blog-entry {
 548
 549     .section();
 550     .clearfix();
 551     margin-bottom: 2*@gridGutterWidth;
 552
 553     .title {
 554         margin-bottom: 1em;
 555         font-size: 1.1em;
 556     }
 557
 558     .media {
 559         img {
 560             border: 1px solid @gray;
 561         }
 562     }
 563
 564     .intro-content, .content {
 565         margin-top: @gridGutterWidth;
 566
 567         object {
 568             margin: @gridGutterWidth 0;
 569         }
 570     }
 571
 572     .entry-info {
 573         font-size: 0.7em;
 574         margin-top: @gridGutterWidth;
 575     }
 576
 577     &.single {
 578         .entry-info {
 579             margin-top: 0;
 580             margin-bottom: @gridGutterWidth;
 581         }
 582     }
 583 }
 584
 585 .section.twitter-feed {
 586
 587     .tweet {
 588         line-height: 1.3em;
 589         font-size: 0.9em;
 590         margin-bottom: @gridGutterWidth;
 591         color: @gray;
 592
 593         .date {
 594             display: block;
 595             font-size: 0.7em;
 596             a {
 597                 text-decoration: none !important;
 598                 border: none;
 599             }
 600         }
 601     }
 602 }