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

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