library/fullcalendar/fullcalendar.css

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