[Summary view] [Print] [Text view]

   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