git.roojs.org Git - roojs1/blob - css-bootstrap/calendar.css

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