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         overflow: hidden;
 313         white-space: nowrap;
 314         text-overflow:ellipsis;
 315         display:inline-block;
 316         width:100%;
 317         }
 318
 319 .fc .ui-resizable-handle {
 320         display: block;
 321         position: absolute;
 322         z-index: 99999;
 323         overflow: hidden; /* hacky spaces (IE6/7) */
 324         font-size: 300%;  /* */
 325         line-height: 50%; /* */
 326         }
 327
 328
 329
 330 /* Horizontal Events
 331 ------------------------------------------------------------------------*/
 332
 333 .fc-event-hori {
 334         border-width: 1px 0;
 335         margin-bottom: 1px;
 336         }
 337
 338 .fc-ltr .fc-event-hori.fc-event-start,
 339 .fc-rtl .fc-event-hori.fc-event-end {
 340         border-left-width: 1px;
 341         border-top-left-radius: 3px;
 342         border-bottom-left-radius: 3px;
 343         }
 344
 345 .fc-ltr .fc-event-hori.fc-event-end,
 346 .fc-rtl .fc-event-hori.fc-event-start {
 347         border-right-width: 1px;
 348         border-top-right-radius: 3px;
 349         border-bottom-right-radius: 3px;
 350         }
 351
 352 /* resizable */
 353
 354 .fc-event-hori .ui-resizable-e {
 355         top: 0           !important; /* importants override pre jquery ui 1.7 styles */
 356         right: -3px      !important;
 357         width: 7px       !important;
 358         height: 100%     !important;
 359         cursor: e-resize;
 360         }
 361
 362 .fc-event-hori .ui-resizable-w {
 363         top: 0           !important;
 364         left: -3px       !important;
 365         width: 7px       !important;
 366         height: 100%     !important;
 367         cursor: w-resize;
 368         }
 369
 370 .fc-event-hori .ui-resizable-handle {
 371         _padding-bottom: 14px; /* IE6 had 0 height */
 372         }
 373
 374
 375
 376 /* Reusable Separate-border Table
 377 ------------------------------------------------------------*/
 378
 379 table.fc-border-separate {
 380         border-collapse: separate;
 381         }
 382
 383 .fc-border-separate th,
 384 .fc-border-separate td {
 385         border-width: 1px 0 0 1px;
 386         }
 387
 388 .fc-border-separate th.fc-last,
 389 .fc-border-separate td.fc-last {
 390         border-right-width: 1px;
 391         }
 392
 393 .fc-border-separate tr.fc-last th,
 394 .fc-border-separate tr.fc-last td {
 395         border-bottom-width: 1px;
 396         }
 397
 398 .fc-border-separate tbody tr.fc-first td,
 399 .fc-border-separate tbody tr.fc-first th {
 400         border-top-width: 0;
 401         }
 402
 403
 404
 405 /* Month View, Basic Week View, Basic Day View
 406 ------------------------------------------------------------------------*/
 407
 408 .fc-grid th {
 409         text-align: center;
 410         }
 411
 412 .fc .fc-week-number {
 413         width: 22px;
 414         text-align: center;
 415         }
 416
 417 .fc .fc-week-number div {
 418         padding: 0 2px;
 419         }
 420
 421 .fc-grid .fc-day-number {
 422         float: right;
 423         padding: 0 2px;
 424         }
 425
 426 .fc-grid .fc-other-month .fc-day-number {
 427         opacity: 0.3;
 428         filter: alpha(opacity=30); /* for IE */
 429         /* opacity with small font can sometimes look too faded
 430            might want to set the 'color' property instead
 431            making day-numbers bold also fixes the problem */
 432         }
 433
 434 .fc-grid .fc-day-content {
 435         clear: both;
 436         padding: 2px 2px 1px; /* distance between events and day edges */
 437         }
 438
 439 /* event styles */
 440
 441 .fc-grid .fc-event-time {
 442         font-weight: bold;
 443         }
 444
 445 /* right-to-left */
 446
 447 .fc-rtl .fc-grid .fc-day-number {
 448         float: left;
 449         }
 450
 451 .fc-rtl .fc-grid .fc-event-time {
 452         float: right;
 453         }
 454
 455
 456
 457 /* Agenda Week View, Agenda Day View
 458 ------------------------------------------------------------------------*/
 459
 460 .fc-agenda table {
 461         border-collapse: separate;
 462         }
 463
 464 .fc-agenda-days th {
 465         text-align: center;
 466         }
 467
 468 .fc-agenda .fc-agenda-axis {
 469         width: 50px;
 470         padding: 0 4px;
 471         vertical-align: middle;
 472         text-align: right;
 473         white-space: nowrap;
 474         font-weight: normal;
 475         }
 476
 477 .fc-agenda .fc-week-number {
 478         font-weight: bold;
 479         }
 480
 481 .fc-agenda .fc-day-content {
 482         padding: 2px 2px 1px;
 483         }
 484
 485 /* make axis border take precedence */
 486
 487 .fc-agenda-days .fc-agenda-axis {
 488         border-right-width: 1px;
 489         }
 490
 491 .fc-agenda-days .fc-col0 {
 492         border-left-width: 0;
 493         }
 494
 495 /* all-day area */
 496
 497 .fc-agenda-allday th {
 498         border-width: 0 1px;
 499         }
 500
 501 .fc-agenda-allday .fc-day-content {
 502         min-height: 34px; /* TODO: doesnt work well in quirksmode */
 503         _height: 34px;
 504         }
 505
 506 /* divider (between all-day and slots) */
 507
 508 .fc-agenda-divider-inner {
 509         height: 2px;
 510         overflow: hidden;
 511         }
 512
 513 .fc-widget-header .fc-agenda-divider-inner {
 514         background: #eee;
 515         }
 516
 517 /* slot rows */
 518
 519 .fc-agenda-slots th {
 520         border-width: 1px 1px 0;
 521         }
 522
 523 .fc-agenda-slots td {
 524         border-width: 1px 0 0;
 525         background: none;
 526         }
 527
 528 .fc-agenda-slots td div {
 529         height: 20px;
 530         }
 531
 532 .fc-agenda-slots tr.fc-slot0 th,
 533 .fc-agenda-slots tr.fc-slot0 td {
 534         border-top-width: 0;
 535         }
 536
 537 .fc-agenda-slots tr.fc-minor th,
 538 .fc-agenda-slots tr.fc-minor td {
 539         border-top-style: dotted;
 540         }
 541
 542 .fc-agenda-slots tr.fc-minor th.ui-widget-header {
 543         *border-top-style: solid; /* doesn't work with background in IE6/7 */
 544         }
 545
 546
 547
 548 /* Vertical Events
 549 ------------------------------------------------------------------------*/
 550
 551 .fc-event-vert {
 552         border-width: 0 1px;
 553         }
 554
 555 .fc-event-vert.fc-event-start {
 556         border-top-width: 1px;
 557         border-top-left-radius: 3px;
 558         border-top-right-radius: 3px;
 559         }
 560
 561 .fc-event-vert.fc-event-end {
 562         border-bottom-width: 1px;
 563         border-bottom-left-radius: 3px;
 564         border-bottom-right-radius: 3px;
 565         }
 566
 567 .fc-event-vert .fc-event-time {
 568         white-space: nowrap;
 569         font-size: 10px;
 570         }
 571
 572 .fc-event-vert .fc-event-inner {
 573         position: relative;
 574         z-index: 2;
 575         }
 576
 577 .fc-event-vert .fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay  */
 578         position: absolute;
 579         z-index: 1;
 580         top: 0;
 581         left: 0;
 582         width: 100%;
 583         height: 100%;
 584         background: #fff;
 585         opacity: .25;
 586         filter: alpha(opacity=25);
 587         }
 588
 589 .fc .ui-draggable-dragging .fc-event-bg, /* TODO: something nicer like .fc-opacity */
 590 .fc-select-helper .fc-event-bg {
 591         display: none\9; /* for IE6/7/8. nested opacity filters while dragging don't work */
 592         }
 593
 594 /* resizable */
 595
 596 .fc-event-vert .ui-resizable-s {
 597         bottom: 0        !important; /* importants override pre jquery ui 1.7 styles */
 598         width: 100%      !important;
 599         height: 8px      !important;
 600         overflow: hidden !important;
 601         line-height: 8px !important;
 602         font-size: 11px  !important;
 603         font-family: monospace;
 604         text-align: center;
 605         cursor: s-resize;
 606         }
 607
 608 .fc-agenda .ui-resizable-resizing { /* TODO: better selector */
 609         _overflow: hidden;
 610         }
 611
 612