code.grnet.gr Git - flowspy/blob - static/css/mobile.css

   1 /* main.css (c) 2007-2008 Jannis Leidel, see LICENSE.txt for license */
   2
   3 /* parts from iui.css (c) 2007 by iUI Project Members */
   4
   5 body {
   6     margin: 0;
   7     font-family: Helvetica;
   8     background: #fff;
   9     color: #000;
  10     overflow-x: hidden;
  11     -webkit-user-select: none;
  12     -webkit-text-size-adjust: none;
  13 }
  14
  15 .float-left {
  16     float: left;
  17 }
  18
  19 .float-right {
  20     float: right;
  21 }
  22
  23 .clear {
  24     clear: both;
  25 }
  26
  27 body > *:not(.toolbar) {
  28     display: none;
  29     position: absolute;
  30     margin: 0;
  31     padding: 0;
  32     left: 0;
  33     top: 100px;
  34     width: 100%;
  35     min-height: 372px;
  36 }
  37
  38 body[orient="landscape"] > *:not(.toolbar|.breadcrumb) {
  39     min-height: 268px;
  40 }
  41
  42 body > *[selected="true"] {
  43     display: block;
  44 }
  45
  46 body > .toolbar {
  47     box-sizing: border-box;
  48     -moz-box-sizing: border-box;
  49     -webkit-box-sizing: border-box;
  50     border-bottom: 1px solid #37657b;
  51     padding: 8px 7px 3px 2px;
  52     height: 60px;
  53     background: #417690 repeat-x;
  54     vertical-align: middle;
  55 }
  56
  57 .toolbar > h1 {
  58     float: left;
  59     overflow: hidden;
  60     padding: 8px 4px 5px 2px;
  61     font-size: 20px;
  62     font-weight: bold;
  63     text-overflow: ellipsis;
  64     white-space: nowrap;
  65 }
  66
  67 .toolbar > h1 a {
  68     color: #f4f379;
  69     text-decoration: none;
  70     padding: 5px 6px;
  71 }
  72
  73 .toolbar > h1 a:active {
  74     background: none;
  75     background-color: none;
  76 }
  77
  78 .toolbar div.greeting {
  79     color: #f4f379;
  80     font-size: 14px;
  81     font-weight: bold;
  82     padding: 1px 4px;
  83     line-height: 20px;
  84 }
  85
  86 .toolbar > div.user-tools a,
  87 .toolbar > div.user-tools a:active,
  88 .toolbar > div.user-tools a:visited {
  89     line-height: 20px;
  90     padding: 1px 4px;
  91     font-size: 14px;
  92     font-weight: bold;
  93     text-decoration: none;
  94     color: #fff;
  95     text-align: right;
  96     float: right;
  97 }
  98
  99 body > ul > li {
 100     position: relative;
 101     margin: 0;
 102     font-size: 20px;
 103     font-weight: bold;
 104     list-style: none;
 105     border-bottom: 1px solid #d9d9d9;
 106     padding: 10px 0 10px 10px;
 107     color: #444;
 108 }
 109
 110 body > ul > li.group, ul#filter h3 {
 111     position: relative;
 112     font-weight: bold;
 113     color: #fff;
 114     background: url(../img/default-bg.gif) repeat-x;
 115     border-top: 1px solid #bdcddf;
 116     border-bottom: 1px solid #86a4c2;
 117     font-size: 16px;
 118     padding: 3px 10px 2px;
 119     margin-top: -1px;
 120 }
 121
 122 body > ul > li.subgroup {
 123     background: url(../img/nav-bg.gif) -10px repeat-x;
 124     border-bottom: 1px solid #d9d9d9;
 125     color: #666;
 126 }
 127
 128 body > ul > li.group:first-child {
 129     top: 0;
 130     border-top: none;
 131     margin-top: 0px;
 132 }
 133
 134 body > ul > li > a {
 135     margin: -10px 0 -10px -10px;
 136     padding: 10px 32px 10px 10px;
 137     text-decoration: none;
 138     color: #5B80B2;
 139     font-size: 20px;
 140     display: block;
 141     background: url(../img/arrow.png) no-repeat right center;
 142 }
 143
 144 body > ul > li > a.selected {
 145     color: #666;
 146     background: none;
 147 }
 148
 149 ul#filter li.selected a, ul#filter li.selected a:link {
 150     color: #666;
 151     background: none;
 152 }
 153
 154 body > ul > li.paginator {
 155     color: #666;
 156     background: #fff url(../img/nav-bg-reverse.gif) repeat-x top;
 157     min-height: 21px;
 158     padding: 9px 0;
 159     font-size: 18px;
 160     font-weight: bold;
 161     margin: 0px;
 162 }
 163
 164 body > ul > li.paginator a:link,
 165 body > ul > li.paginator a:active,
 166 body > ul > li.paginator a:visited {
 167     text-decoration: none;
 168     color: #5B80B2;
 169     background: none;
 170     margin: -6px 8px 0px -10px;
 171 }
 172
 173 body > ul > li.paginator a.inactive,
 174 body > ul > li.paginator a.active {
 175     background: none;
 176 }
 177
 178 body > ul > li.paginator span a.inactive,
 179 body > ul > li.paginator span a.active {
 180     padding: 9px 12px;
 181     margin: -9px -1px 0px 0px;
 182 }
 183
 184 body > ul > li.paginator span a.active {
 185     color: #666;
 186     margin-left: 0px;
 187     margin-right: 0px;
 188     padding-left: 13px;
 189 }
 190
 191 body > ul > li.paginator a.inactive {
 192     border: 1px solid #ccc;
 193     border-top: none;
 194     color: #5B80B2;
 195     background: #fff url(../img/nav-bg.gif) repeat-x bottom;
 196 }
 197
 198 body > ul > li.paginator span.float-right a.inactive {
 199     border-right: none;
 200 }
 201
 202 body > ul > li.paginator span.active {
 203     padding-right: 12px;
 204 }
 205
 206 body > ul > li.paginator span a.showall {
 207     margin: 0px;
 208 }
 209
 210 body > .breadcrumbs {
 211     box-sizing: border-box;
 212     -moz-box-sizing: border-box;
 213     -webkit-box-sizing: border-box;
 214     position: absolute;
 215     background: url(../img/nav-bg-reverse.gif) repeat-x;
 216     color: #666;
 217     top: 60px;
 218     min-height: 40px;
 219     max-height: 40px;
 220     padding: 9px 0px 9px 8px;
 221     font-size: 18px;
 222     border-top: 1px solid #fff;
 223     border-bottom: 1px solid #cbcbcb;
 224     font-weight: bold;
 225 }
 226
 227 .breadcrumbs a:link,
 228 .breadcrumbs a:active,
 229 .breadcrumbs a:visited {
 230     text-decoration: none;
 231     color: #5B80B2;
 232     background: none;
 233     padding: 9px 16px 9px 10px;
 234     margin: -9px 4px 0px -6px;
 235 }
 236
 237 .breadcrumbs a:active {
 238     color: #036;
 239 }
 240
 241 .breadcrumbs a.active,
 242 .breadcrumbs a.inactive {
 243     background: none;
 244 }
 245
 246 .breadcrumbs span {
 247     padding-right: 12px;
 248 }
 249
 250 .breadcrumbs a.active,
 251 .breadcrumbs span.active {
 252     color: #666;
 253 }
 254
 255 .breadcrumbs a.inactive,
 256 .breadcrumbs span.inactive {
 257     padding-right: 12px;
 258     padding-left: 12px;
 259     padding-bottom: 8px;
 260     margin-right: 0px;
 261     margin-left: -1px;
 262     border: 1px solid #ccc;
 263     border-top: none;
 264     color: #5B80B2;
 265     background: #fff url(../img/nav-bg.gif) repeat-x bottom;
 266 }
 267
 268 .breadcrumbs a.float-left {
 269     margin-left: -11px;
 270 }
 271
 272 .breadcrumbs a.float-right {
 273     text-align: right;
 274 }
 275
 276 .breadcrumbs a.active {
 277     margin-left: -8px;
 278     padding-right: 21px;
 279 }
 280
 281 .breadcrumbs a#_recent.inactive {
 282     padding-left: 12px;
 283 }
 284
 285 .breadcrumbs a#_recent.active,
 286 .breadcrumbs a#_filter.active {
 287     padding-left: 22px;
 288     margin-left: 0;
 289     padding-right: 9px;
 290 }
 291
 292 .breadcrumbs a#_filter span.searchimg {
 293     background: url(../img/search.png) no-repeat center center;
 294 }
 295
 296 .submit-row {
 297     box-sizing: border-box;
 298     -moz-box-sizing: border-box;
 299     -webkit-box-sizing: border-box;
 300     background: #fff url(../img/nav-bg-reverse.gif) repeat-x;
 301     color: #666;
 302     top: 48px;
 303     min-height: 40px;
 304     max-height: 40px;
 305     padding: 9px 0px 9px 8px;
 306     font-size: 18px;
 307     border: 1px solid #d9d9d9;
 308     border-width: 1px 0;
 309     font-weight: bold;
 310 }
 311
 312 .submit-row a:link,
 313 .submit-row a:active,
 314 .submit-row a:visited {
 315     text-decoration: none;
 316     color: #5B80B2;
 317     padding: 6px;
 318     margin: -6px 6px 0px 6px;
 319     padding: 9px 16px 9px 10px;
 320     margin: -9px 4px 0px -6px;
 321 }
 322
 323 .submit-row a:active {
 324     color: #036;
 325 }
 326
 327 .submit-row a.inactive, .submit-row a.active {
 328     background: none;
 329 }
 330
 331 .submit-row span {
 332     padding-right: 12px;
 333 }
 334
 335 .submit-row a.active, .submit-row span.active {
 336     color: #666;
 337 }
 338
 339 .submit-row a.inactive, .submit-row span.inactive {
 340     color: #5B80B2;
 341     padding-right: 12px;
 342     padding-left: 12px;
 343     padding-bottom: 8px;
 344     margin-right: 0px;
 345     margin-left: -1px;
 346     border: 1px solid #ccc;
 347     border-top: none;
 348     background: #fff url(../img/nav-bg.gif) repeat-x bottom;
 349 }
 350
 351 .submit-row a.float-left {
 352     margin-left: -11px;
 353 }
 354
 355 .submit-row a.submit {
 356     color: #fff;
 357     background: #BCD1E8 url(../img/default-bg.gif) repeat-x bottom;
 358
 359
 360 /*    text-shadow: #BCD1E8 1px 1px 0;
 361 */
 362 }
 363
 364 .submit-row a.delete {
 365     color: #CC3434;
 366 }
 367
 368 /***/
 369
 370 body > ul > li.searchbar {
 371     color: #666;
 372     background: #fff url(../img/nav-bg-reverse.gif) repeat-x top;
 373     min-height: 21px;
 374     padding: 9px 0;
 375     font-size: 18px;
 376     font-weight: bold;
 377 }
 378
 379 body > ul > li.searchbar a:link,
 380 body > ul > li.searchbar a:active,
 381 body > ul > li.searchbar a:visited {
 382     text-decoration: none;
 383     color: #5B80B2;
 384     background: none;
 385     margin: -6px 8px 0px -10px;
 386 }
 387
 388 body > ul > li.searchbar span a.inactive,
 389 body > ul > li.searchbar span a.active {
 390     padding: 9px 12px;
 391     margin: -9px 0px 0px;
 392 }
 393
 394 body > ul > li.searchbar span.float-left a.inactive {
 395     margin-right: 4px;
 396 }
 397
 398 body > ul > li.searchbar a.inactive {
 399     border: 1px solid #ccc;
 400     border-top: none;
 401     color: #5B80B2;
 402     background: #fff url(../img/nav-bg.gif) repeat-x bottom;
 403 }
 404
 405 body > ul > li.searchbar span.float-right a.inactive {
 406     border-right: none;
 407 }
 408
 409 body > ul > li.searchbar span.active {
 410     padding-right: 12px;
 411 }
 412
 413 /***/
 414
 415 input, textarea, select {
 416     box-sizing: border-box;
 417     -webkit-box-sizing: border-box;
 418     width: 100%;
 419     margin: 8px 0 0 0;
 420     font-size: 16px;
 421     font-weight: normal;
 422     background: none;
 423 }
 424
 425 body > .panel {
 426     box-sizing: border-box;
 427     -webkit-box-sizing: border-box;
 428     background: #fff;
 429 }
 430
 431 .panel > fieldset {
 432     position: relative;
 433     margin: 0 0 20px 0;
 434     padding: 0;
 435     background: #FFFFFF;
 436     border: none;
 437     text-align: right;
 438     font-size: 16px;
 439 }
 440
 441 .form-row {
 442     position: relative;
 443     min-height: 42px;
 444     text-align: left;
 445     padding: 0 8px;
 446 }
 447
 448 fieldset > .form-row:last-child {
 449     border-bottom: none !important;
 450 }
 451
 452 fieldset > .form-row:first-child {
 453     border-top: none;
 454 }
 455
 456 .form-row input,
 457 #search > input[type="text"] {
 458     display: block;
 459     box-sizing: border-box;
 460     -webkit-box-sizing: border-box;
 461     margin: 0;
 462     padding: 12px 10px 0 12px;
 463     height: 40px;
 464     background: none;
 465     -webkit-border-radius: 5px;
 466     border: 1px solid #D9D9D9;
 467 }
 468
 469 #search > input[type="text"] {
 470     margin-right: 20px;
 471 }
 472
 473 #search {
 474     margin: 5px 10px 5px 0px;
 475     background: none;
 476 }
 477
 478 .form-row > input.vDateField,
 479 .form-row > input.vTimeField {
 480     width: 100%;
 481 }
 482
 483 .form-row > input.vTimeField {
 484     margin-top: 10px;
 485 }
 486
 487 .form-row > input[type="checkbox"] {
 488     width: 30px;
 489     height: 30px;
 490     margin: 8px 0px 0px;
 491     border: 0;
 492     -webkit-border-radius: 8px;
 493     background: #fff url(../img/default-bg.gif) repeat-x bottom;
 494     float: left;
 495     clear: left;
 496 }
 497
 498 .radiolist input {
 499     position:relative;
 500     width: 30px;
 501     height: 30px;
 502     margin: -6px 0;
 503     padding: 0;
 504     border: 0;
 505     -webkit-border-radius: 8px;
 506     background: #fff url(../img/default-bg.gif) repeat-x bottom;
 507     float: left;
 508     clear: left;
 509 }
 510
 511 .form-row span {
 512     float: right;
 513     margin-top: -20px;
 514 }
 515
 516 .form-row > select {
 517     -webkit-border-radius: 5px;
 518     border: 1px solid #D9D9D9;
 519     margin: 10px 0 0 0;
 520     padding: 12px 10px 10 12px;
 521     height: 40px;
 522     clear: left;
 523 }
 524
 525 .form-row > textarea {
 526     box-sizing: border-box;
 527     -webkit-box-sizing: border-box;
 528     display: block;
 529     margin: 0;
 530     border: none;
 531     padding: 12px 10px 0 12px;
 532     height: 126px;
 533     background: none;
 534     -webkit-border-radius: 5px;
 535     border: 1px solid #D9D9D9;
 536 }
 537
 538 .form-row label,
 539 .form-row p,
 540 #search > label {
 541     position: relative;
 542     top: 9px;
 543     padding: 0 3px;
 544     margin-left: 10px;
 545     font-weight: normal;
 546     font-size: 16px;
 547     color: #666;
 548     text-align: left;
 549     background-color: #fff;
 550 }
 551
 552 .form-row p.datetime {
 553     margin: 5px -13px 0 0px;
 554     background-color: #fff !important;
 555     padding: 5px 0 0 13px;
 556 }
 557
 558 .form-row p.datetime input {
 559     margin: 5px 0px 10px -13px;
 560 }
 561
 562 .form-row p.datetime br {
 563     display: none;
 564 }
 565
 566 .form-row p.datetime span {
 567     display: none;
 568 }
 569
 570 .form-row label.vCheckboxLabel {
 571     float: left;
 572     padding: 0.4em 0;
 573 }
 574
 575 .form-row label.required {
 576     font-weight: bold;
 577 }
 578
 579 .form-row > ul.radiolist li {
 580     list-style: none;
 581     margin: 10px 10px 20px;
 582     padding: 0;
 583 }
 584 .form-row > ul.radiolist label {
 585     top: 13px;
 586 }
 587
 588 .form-row > ul.inline {
 589     margin-left: 13px;
 590     padding: 0;
 591 }
 592
 593 .form-row > ul.inline li {
 594     padding: 2px;
 595 }
 596
 597 .form-row > ul {
 598     color: #333;
 599     list-style: none;
 600     margin: 0px 2px;
 601     padding: 0px;
 602     font-weight: normal;
 603 }
 604
 605 .form-row > ul > li > ul {
 606     padding: 10px 20px;
 607 }
 608
 609 .form-row a.add-another {
 610     display: none;
 611 }
 612
 613 .panel > h2 {
 614     margin: 0;
 615     padding: 2px 10px;
 616     font-size: 14px;
 617     font-weight: bold;
 618     color: #fff;
 619     background: url(../img/default-bg.gif) repeat-x;
 620     border-top: 1px solid #bdcddf;
 621     border-bottom: 1px solid #86a4c2;
 622 }
 623
 624 .panel > h3 {
 625     margin: 0;
 626     padding: 2px 10px;
 627     font-size: 14px;
 628     font-weight: bold;
 629     color: #fff;
 630     background: url(../img/nav-bg.gif) -10px repeat-x;
 631     border-bottom: 1px solid #d9d9d9;
 632     border-top: 1px solid #d9d9d9;
 633     color: #666;
 634 }
 635
 636 .panel > h1 {
 637     margin: 0;
 638     padding: 10px;
 639     font-size: 16px;
 640     font-weight: bold;
 641     color: #666;
 642     background: none;
 643 }
 644
 645 .panel > h1.error {
 646     color: #CC2830;
 647 }
 648
 649 .panel a.help-link {
 650     float: right;
 651     color: #ccc;
 652     text-decoration: none;
 653     font-weight: bold;
 654     padding: 2px 4px;
 655     font-size: 14px;
 656 }
 657
 658 ul.errorlist, ul.errorlist li {
 659     list-style: none;
 660     color: #cc2830;
 661     font-size: 12px;
 662     padding: 2px 4px;
 663     float: right;
 664     font-weight: bold;
 665 }
 666
 667 ul.errorlist > li {
 668     list-style: none;
 669 }