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