library/fullcalendar/fullcalendar.css

   1 /*
   2  * FullCalendar v1.5.3 Stylesheet
   3  *
   4  * Copyright (c) 2011 Adam Shaw
   5  * Dual licensed under the MIT and GPL licenses, located in
   6  * MIT-LICENSE.txt and GPL-LICENSE.txt respectively.
   7  *
   8  * Date: Mon Feb 6 22:40:40 2012 -0800
   9  *
  10  */
  11
  12
  13 .fc {
  14         direction: ltr;
  15         text-align: left;
  16         }
  17
  18 .fc table {
  19         border-collapse: collapse;
  20         border-spacing: 0;
  21         }
  22
  23 html .fc,
  24 .fc table {
  25         font-size: 1em;
  26         }
  27
  28 .fc td,
  29 .fc th {
  30         padding: 0;
  31         vertical-align: top;
  32         }
  33
  34
  35
  36 /* Header
  37 ------------------------------------------------------------------------*/
  38
  39 .fc-header td {
  40         white-space: nowrap;
  41         }
  42
  43 .fc-header-left {
  44         width: 25%;
  45         text-align: left;
  46         }
  47
  48 .fc-header-center {
  49         text-align: center;
  50         }
  51
  52 .fc-header-right {
  53         width: 25%;
  54         text-align: right;
  55         }
  56
  57 .fc-header-title {
  58         display: inline-block;
  59         vertical-align: top;
  60         }
  61
  62 .fc-header-title h2 {
  63         margin-top: 0;
  64         white-space: nowrap;
  65         }
  66
  67 .fc .fc-header-space {
  68         padding-left: 10px;
  69         }
  70
  71 .fc-header .fc-button {
  72         margin-bottom: 1em;
  73         vertical-align: top;
  74         }
  75
  76 /* buttons edges butting together */
  77
  78 .fc-header .fc-button {
  79         margin-right: -1px;
  80         }
  81
  82 .fc-header .fc-corner-right {
  83         margin-right: 1px; /* back to normal */
  84         }
  85
  86 .fc-header .ui-corner-right {
  87         margin-right: 0; /* back to normal */
  88         }
  89
  90 /* button layering (for border precedence) */
  91
  92 .fc-header .fc-state-hover,
  93 .fc-header .ui-state-hover {
  94         z-index: 2;
  95         }
  96
  97 .fc-header .fc-state-down {
  98         z-index: 3;
  99         }
 100
 101 .fc-header .fc-state-active,
 102 .fc-header .ui-state-active {
 103         z-index: 4;
 104         }
 105
 106
 107
 108 /* Content
 109 ------------------------------------------------------------------------*/
 110
 111 .fc-content {
 112         clear: both;
 113         }
 114
 115 .fc-view {
 116         width: 100%; /* needed for view switching (when view is absolute) */
 117         overflow: hidden;
 118         }
 119
 120
 121
 122 /* Cell Styles
 123 ------------------------------------------------------------------------*/
 124
 125 .fc-widget-header,    /* <th>, usually */
 126 .fc-widget-content {  /* <td>, usually */
 127         border: 1px solid #ccc;
 128         }
 129
 130 .fc-state-highlight { /* <td> today cell */ /* TODO: add .fc-today to <th> */
 131         background: #ffc;
 132         }
 133
 134 .fc-cell-overlay { /* semi-transparent rectangle while dragging */
 135         background: #9cf;
 136         opacity: .2;
 137         filter: alpha(opacity=20); /* for IE */
 138         }
 139
 140
 141
 142 /* Buttons
 143 ------------------------------------------------------------------------*/
 144
 145 .fc-button {
 146         position: relative;
 147         display: inline-block;
 148         cursor: pointer;
 149         }
 150
 151 .fc-state-default { /* non-theme */
 152         border-style: solid;
 153         border-width: 1px 0;
 154         }
 155
 156 .fc-button-inner {
 157         position: relative;
 158         float: left;
 159         overflow: hidden;
 160         }
 161
 162 .fc-state-default .fc-button-inner { /* non-theme */
 163         border-style: solid;
 164         border-width: 0 1px;
 165         }
 166
 167 .fc-button-content {
 168         position: relative;
 169         float: left;
 170         height: 1.9em;
 171         line-height: 1.9em;
 172         padding: 0 .6em;
 173         white-space: nowrap;
 174         }
 175
 176 /* icon (for jquery ui) */
 177
 178 .fc-button-content .fc-icon-wrap {
 179         position: relative;
 180         float: left;
 181         top: 50%;
 182         }
 183
 184 .fc-button-content .ui-icon {
 185         position: relative;
 186         float: left;
 187         margin-top: -50%;
 188         *margin-top: 0;
 189         *top: -50%;
 190         }
 191
 192 /* gloss effect */
 193
 194 .fc-state-default .fc-button-effect {
 195         position: absolute;
 196         top: 50%;
 197         left: 0;
 198         }
 199
 200 .fc-state-default .fc-button-effect span {
 201         position: absolute;
 202         top: -100px;
 203         left: 0;
 204         width: 500px;
 205         height: 100px;
 206         border-width: 100px 0 0 1px;
 207         border-style: solid;
 208         border-color: #fff;
 209         background: #444;
 210         opacity: .09;
 211         filter: alpha(opacity=9);
 212         }
 213
 214 /* button states (determines colors)  */
 215
 216 .fc-state-default,
 217 .fc-state-default .fc-button-inner {
 218         border-style: solid;
 219         border-color: #ccc #bbb #aaa;
 220         background: #F3F3F3;
 221         color: #000;
 222         }
 223
 224 .fc-state-hover,
 225 .fc-state-hover .fc-button-inner {
 226         border-color: #999;
 227         }
 228
 229 .fc-state-down,
 230 .fc-state-down .fc-button-inner {
 231         border-color: #555;
 232         background: #777;
 233         }
 234
 235 .fc-state-active,
 236 .fc-state-active .fc-button-inner {
 237         border-color: #555;
 238         background: #777;
 239         color: #fff;
 240         }
 241
 242 .fc-state-disabled,
 243 .fc-state-disabled .fc-button-inner {
 244         color: #999;
 245         border-color: #ddd;
 246         }
 247
 248 .fc-state-disabled {
 249         cursor: default;
 250         }
 251
 252 .fc-state-disabled .fc-button-effect {
 253         display: none;
 254         }
 255
 256
 257
 258 /* Global Event Styles
 259 ------------------------------------------------------------------------*/
 260
 261 .fc-event {
 262         border-style: solid;
 263         border-width: 0;
 264         font-size: .85em;
 265         cursor: default;
 266         }
 267
 268 a.fc-event,
 269 .fc-event-draggable {
 270         cursor: pointer;
 271         }
 272
 273 a.fc-event {
 274         text-decoration: none;
 275         }
 276
 277 .fc-rtl .fc-event {
 278         text-align: right;
 279         }
 280
 281 .fc-event-skin {
 282         border-color: #36c;     /* default BORDER color */
 283         background-color: #36c; /* default BACKGROUND color */
 284         color: #fff;            /* default TEXT color */
 285         }
 286
 287 .fc-event-inner {
 288         position: relative;
 289         width: 100%;
 290         height: 100%;
 291         border-style: solid;
 292         border-width: 0;
 293         overflow: hidden;
 294         }
 295
 296 .fc-event-time,
 297 .fc-event-title {
 298         padding: 0 1px;
 299         }
 300
 301 .fc .ui-resizable-handle { /*** TODO: don't use ui-resizable anymore, change class ***/
 302         display: block;
 303         position: absolute;
 304         z-index: 99999;
 305         overflow: hidden; /* hacky spaces (IE6/7) */
 306         font-size: 300%;  /* */
 307         line-height: 50%; /* */
 308         }
 309
 310
 311
 312 /* Horizontal Events
 313 ------------------------------------------------------------------------*/
 314
 315 .fc-event-hori {
 316         border-width: 1px 0;
 317         margin-bottom: 1px;
 318         }
 319
 320 /* resizable */
 321
 322 .fc-event-hori .ui-resizable-e {
 323         top: 0           !important; /* importants override pre jquery ui 1.7 styles */
 324         right: -3px      !important;
 325         width: 7px       !important;
 326         height: 100%     !important;
 327         cursor: e-resize;
 328         }
 329
 330 .fc-event-hori .ui-resizable-w {
 331         top: 0           !important;
 332         left: -3px       !important;
 333         width: 7px       !important;
 334         height: 100%     !important;
 335         cursor: w-resize;
 336         }
 337
 338 .fc-event-hori .ui-resizable-handle {
 339         _padding-bottom: 14px; /* IE6 had 0 height */
 340         }
 341
 342
 343
 344 /* Fake Rounded Corners (for buttons and events)
 345 ------------------------------------------------------------*/
 346
 347 .fc-corner-left {
 348         margin-left: 1px;
 349         }
 350
 351 .fc-corner-left .fc-button-inner,
 352 .fc-corner-left .fc-event-inner {
 353         margin-left: -1px;
 354         }
 355
 356 .fc-corner-right {
 357         margin-right: 1px;
 358         }
 359
 360 .fc-corner-right .fc-button-inner,
 361 .fc-corner-right .fc-event-inner {
 362         margin-right: -1px;
 363         }
 364
 365 .fc-corner-top {
 366         margin-top: 1px;
 367         }
 368
 369 .fc-corner-top .fc-event-inner {
 370         margin-top: -1px;
 371         }
 372
 373 .fc-corner-bottom {
 374         margin-bottom: 1px;
 375         }
 376
 377 .fc-corner-bottom .fc-event-inner {
 378         margin-bottom: -1px;
 379         }
 380
 381
 382
 383 /* Fake Rounded Corners SPECIFICALLY FOR EVENTS
 384 -----------------------------------------------------------------*/
 385
 386 .fc-corner-left .fc-event-inner {
 387         border-left-width: 1px;
 388         }
 389
 390 .fc-corner-right .fc-event-inner {
 391         border-right-width: 1px;
 392         }
 393
 394 .fc-corner-top .fc-event-inner {
 395         border-top-width: 1px;
 396         }
 397
 398 .fc-corner-bottom .fc-event-inner {
 399         border-bottom-width: 1px;
 400         }
 401
 402
 403
 404 /* Reusable Separate-border Table
 405 ------------------------------------------------------------*/
 406
 407 table.fc-border-separate {
 408         border-collapse: separate;
 409         }
 410
 411 .fc-border-separate th,
 412 .fc-border-separate td {
 413         border-width: 1px 0 0 1px;
 414         }
 415
 416 .fc-border-separate th.fc-last,
 417 .fc-border-separate td.fc-last {
 418         border-right-width: 1px;
 419         }
 420
 421 .fc-border-separate tr.fc-last th,
 422 .fc-border-separate tr.fc-last td {
 423         border-bottom-width: 1px;
 424         }
 425
 426 .fc-border-separate tbody tr.fc-first td,
 427 .fc-border-separate tbody tr.fc-first th {
 428         border-top-width: 0;
 429         }
 430
 431
 432
 433 /* Month View, Basic Week View, Basic Day View
 434 ------------------------------------------------------------------------*/
 435
 436 .fc-grid th {
 437         text-align: center;
 438         }
 439
 440 .fc-grid .fc-day-number {
 441         float: right;
 442         padding: 0 2px;
 443         }
 444
 445 .fc-grid .fc-other-month .fc-day-number {
 446         opacity: 0.3;
 447         filter: alpha(opacity=30); /* for IE */
 448         /* opacity with small font can sometimes look too faded
 449            might want to set the 'color' property instead
 450            making day-numbers bold also fixes the problem */
 451         }
 452
 453 .fc-grid .fc-day-content {
 454         clear: both;
 455         padding: 2px 2px 1px; /* distance between events and day edges */
 456         }
 457
 458 /* event styles */
 459
 460 .fc-grid .fc-event-time {
 461         font-weight: bold;
 462         }
 463
 464 /* right-to-left */
 465
 466 .fc-rtl .fc-grid .fc-day-number {
 467         float: left;
 468         }
 469
 470 .fc-rtl .fc-grid .fc-event-time {
 471         float: right;
 472         }
 473
 474
 475
 476 /* Agenda Week View, Agenda Day View
 477 ------------------------------------------------------------------------*/
 478
 479 .fc-agenda table {
 480         border-collapse: separate;
 481         }
 482
 483 .fc-agenda-days th {
 484         text-align: center;
 485         }
 486
 487 .fc-agenda .fc-agenda-axis {
 488         width: 50px;
 489         padding: 0 4px;
 490         vertical-align: middle;
 491         text-align: right;
 492         white-space: nowrap;
 493         font-weight: normal;
 494         }
 495
 496 .fc-agenda .fc-day-content {
 497         padding: 2px 2px 1px;
 498         }
 499
 500 /* make axis border take precedence */
 501
 502 .fc-agenda-days .fc-agenda-axis {
 503         border-right-width: 1px;
 504         }
 505
 506 .fc-agenda-days .fc-col0 {
 507         border-left-width: 0;
 508         }
 509
 510 /* all-day area */
 511
 512 .fc-agenda-allday th {
 513         border-width: 0 1px;
 514         }
 515
 516 .fc-agenda-allday .fc-day-content {
 517         min-height: 34px; /* TODO: doesnt work well in quirksmode */
 518         _height: 34px;
 519         }
 520
 521 /* divider (between all-day and slots) */
 522
 523 .fc-agenda-divider-inner {
 524         height: 2px;
 525         overflow: hidden;
 526         }
 527
 528 .fc-widget-header .fc-agenda-divider-inner {
 529         background: #eee;
 530         }
 531
 532 /* slot rows */
 533
 534 .fc-agenda-slots th {
 535         border-width: 1px 1px 0;
 536         }
 537
 538 .fc-agenda-slots td {
 539         border-width: 1px 0 0;
 540         background: none;
 541         }
 542
 543 .fc-agenda-slots td div {
 544         height: 20px;
 545         }
 546
 547 .fc-agenda-slots tr.fc-slot0 th,
 548 .fc-agenda-slots tr.fc-slot0 td {
 549         border-top-width: 0;
 550         }
 551
 552 .fc-agenda-slots tr.fc-minor th,
 553 .fc-agenda-slots tr.fc-minor td {
 554         border-top-style: dotted;
 555         }
 556
 557 .fc-agenda-slots tr.fc-minor th.ui-widget-header {
 558         *border-top-style: solid; /* doesn't work with background in IE6/7 */
 559         }
 560
 561
 562
 563 /* Vertical Events
 564 ------------------------------------------------------------------------*/
 565
 566 .fc-event-vert {
 567         border-width: 0 1px;
 568         }
 569
 570 .fc-event-vert .fc-event-head,
 571 .fc-event-vert .fc-event-content {
 572         position: relative;
 573         z-index: 2;
 574         width: 100%;
 575         overflow: hidden;
 576         }
 577
 578 .fc-event-vert .fc-event-time {
 579         white-space: nowrap;
 580         font-size: 10px;
 581         }
 582
 583 .fc-event-vert .fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay  */
 584         position: absolute;
 585         z-index: 1;
 586         top: 0;
 587         left: 0;
 588         width: 100%;
 589         height: 100%;
 590         background: #fff;
 591         opacity: .3;
 592         filter: alpha(opacity=30);
 593         }
 594
 595 .fc .ui-draggable-dragging .fc-event-bg, /* TODO: something nicer like .fc-opacity */
 596 .fc-select-helper .fc-event-bg {
 597         display: none\9; /* for IE6/7/8. nested opacity filters while dragging don't work */
 598         }
 599
 600 /* resizable */
 601
 602 .fc-event-vert .ui-resizable-s {
 603         bottom: 0        !important; /* importants override pre jquery ui 1.7 styles */
 604         width: 100%      !important;
 605         height: 8px      !important;
 606         overflow: hidden !important;
 607         line-height: 8px !important;
 608         font-size: 11px  !important;
 609         font-family: monospace;
 610         text-align: center;
 611         cursor: s-resize;
 612         }
 613
 614 .fc-agenda .ui-resizable-resizing { /* TODO: better selector */
 615         _overflow: hidden;
 616         }
 617
 618