interface/themes/ajax_calendar.css

   1 /* ====================================
   2  * the style sheet for the ajax_template calendar
   3  * ====================================*/
   4
   5 a {
   6     text-decoration:none;
   7 }
   8 td {
   9     font-family: Arial, Helvetica, sans-serif;
  10 }
  11 div.tiny { width:1px; height:1px; font-size:1px; }
  12 .currentview {
  13     border: 2px solid blue;
  14     cursor: default;
  15 }
  16 #printview, #dayview, #weekview, #monthview {
  17     cursor: pointer; cursor: hand;
  18 }
  19 #functions {
  20     width: 13.5%; /* can't make this 25% for some reason */
  21     min-width: 105px;
  22     float: left;
  23     padding: 0px 5px 0px 5px;
  24     margin-right: 0%; /* added because of the width issue above */
  25 }
  26 .rtl #functions{
  27     float: right;
  28 }
  29
  30 #topToolbarRight {
  31     float: right;
  32     width: 100%;
  33     border-bottom:1px solid black;
  34     padding: 5px 0px 3px 0px; /*RP_ADDED_2017-02-19*/
  35 }
  36 .rtl #topToolbarRight {
  37     float: right;
  38 }
  39 #dateNAV {
  40     float: left;
  41     font-family: Arial, Helvetica, sans-serif;
  42     font-size: 14pt;
  43 }
  44 .rtl #dateNAV {
  45     float: right;
  46 }
  47 #dateDisplay {
  48     float: left;
  49     padding-left: 10px;
  50     font-family: Arial, Helvetica, sans-serif;
  51 }
  52 .rtl #dateDisplay{
  53     float: right;
  54 }
  55 #viewPicker {
  56     float: right;
  57     margin-right: 10px;
  58 }
  59 .rtl #viewPicker {
  60     float: left;
  61 }
  62 #bigCalHeader {
  63     width:70%;
  64     float: right;
  65     text-align:center;
  66     font-family: Arial, Helvetica, sans-serif;
  67     font-size: 14pt;
  68 }
  69 .rtl #bigCalHeader {
  70     float: left;
  71 }
  72 #providerPicker {
  73     font-family: Arial, Helvetica, sans-serif;
  74     width: 100%;
  75 }
  76 #providerPicker #pc_facility {
  77     width: 100%;
  78 }
  79 #providerPicker #pc_username {
  80     width: 100%;
  81 }
  82 #facilityColor {
  83     font-family: Arial, Helvetica, sans-serif;
  84     width: 100%;
  85     float: left;
  86 }
  87 #facilityColor table{
  88     width:100%;
  89     border-collapse: collapse;
  90 }
  91 #bottom{
  92     float:left;
  93     position: relative;
  94     width:100%;
  95 }
  96 #bigCal {
  97     overflow: hidden;
  98     background-color: #FFF3D1;
  99     border-left:1px solid black;
 100 }
 101
 102 #bigCal table {
 103     border-collapse: collapse;
 104     border: none;
 105     vertical-align:middle;
 106     width: 100%;
 107 }
 108 #bigCal td {
 109     padding: 1px;
 110     margin: 0px;
 111 }
 112
 113 #bottomLeft
 114 {
 115     width: 15%;
 116     min-width:140px;
 117     float: left;
 118     clear: left;
 119
 120 }
 121 /* these are for the small datepicker DIV */
 122 #datePicker {
 123     width: 100%;
 124 }
 125 #datePicker table {
 126     width:96%;
 127     border-collapse: collapse;
 128     margin-left: 3px;
 129 }
 130 #datePicker td {
 131     width: 19.5px;
 132     font-family: Arial, Helvetica, sans-serif;
 133     font-size: 0.7em;
 134     text-align: center;
 135     /* font-size: 9pt;  */
 136 }
 137 #datePicker .tdMonthName-small {
 138     text-align: center;
 139     font-family: Arial, Helvetica, sans-serif;
 140     font-size: 12px;
 141     font-style: normal;
 142     background-color: #FFF2E8;
 143     cursor: pointer;
 144 }
 145 #datePicker .tdDOW-small {
 146     font-family: Arial, Helvetica, sans-serif;
 147     font-size: 10px;
 148     vertical-align: top;
 149     text-align: center;
 150     border: none;
 151     padding: 2px 3px 2px 3px;
 152     background-color: #FFF2E8;
 153 }
 154 #datePicker .tdDatePicker {
 155     cursor: pointer; cursor: hand;
 156 }
 157 #datePicker .tdWeekend-small {
 158     font-family: Arial, Helvetica, sans-serif;
 159     font-size: 10px;
 160     vertical-align: top;
 161     border: none;
 162     padding: 2px 3px 2px 3px;
 163     background-color: #ffffff;
 164     color: #999999;
 165 }
 166 #datePicker .tdHoliday-small {
 167     font-family: Arial, Helvetica, sans-serif;
 168     font-size: 10px;
 169     vertical-align: top;
 170     border: none;
 171     padding: 2px 3px 2px 3px;
 172     background-color: #ffffff;
 173     color: red;
 174 }
 175 #datePicker .tdOtherMonthDay-small {
 176     font-family: Arial, Helvetica, sans-serif;
 177     font-size: 10px;
 178     vertical-align: top;
 179     border: none;
 180     padding: 2px 3px 2px 3px;
 181     background-color: #ffffff;
 182     color: #999999;
 183 }
 184 #datePicker .tdMonthDay-small {
 185     font-family: Arial, Helvetica, sans-serif;
 186     font-size: 10px;
 187     vertical-align: top;
 188     border: none;
 189     padding: 2px 3px 2px 3px;
 190     background-color: #ffffff;
 191 }
 192 #datePicker .currentWeek {
 193     background-color: #DBD5FF;
 194 }
 195 #datePicker .currentDate {
 196     background-color: #A79BE7;
 197     color: #E8FAFF;
 198 }
 199 #datePicker .tdDatePickerHighlight {
 200     background-color: #A79BE7;
 201     color: #E8FAFF;
 202 }
 203
 204 /* the DIV of times */
 205 #times {
 206     border-right: 1px solid #999;
 207     width: 1%;
 208     background-color: #FFF3D1;
 209     padding: 0px;
 210 }
 211 #times table {
 212     border-collapse: collapse;
 213     width: 100%;
 214     margin: 0px;
 215     padding: 0px;
 216     background-color: #E7D294;
 217     background-color: #FFF3D1;
 218 }
 219 #times table td {
 220     border-bottom: 1px solid #999;
 221     margin: 0px;
 222     padding: 0px;
 223     font-size: 0.8em;
 224 }
 225 .timeslot {
 226     /* height value is tied to two PHP variables in the ajax_*.html files
 227      * if you change this value then be sure to change the matching value
 228      * in those files */
 229     height: 20px;
 230     margin: 0px;
 231     padding: 0px;
 232     text-align: center;
 233 }
 234 .schedule {
 235     background-color: #FFF3D1;
 236     background-color: #FFF;
 237     vertical-align: top;
 238     padding: 0px;
 239     margin: 0px;
 240     border: 1px solid #999999;
 241     width: 25em;
 242
 243 }
 244
 245 /* for the header row with provider names */
 246 .providerheader {
 247     text-align: center;
 248     background-color: #EDEAFF;
 249     width: 100%;
 250     overflow:hidden;
 251     border-bottom: 1px solid lightgrey;
 252     white-space: nowrap;
 253 }
 254
 255 /* for the DIV inside each TD, this DIV contains any events for a single day */
 256 .calendar_day {
 257     position: relative;
 258     height: 100%;
 259     width: 100%;
 260 }
 261
 262 /* classes specific to the WEEK view */
 263 .week_dateheader {
 264     border-left: 1px solid #999;
 265     border-right: 1px solid #999;
 266     font-size: 0.7em;
 267     font-weight: bold;
 268 }
 269 .week_currday {
 270     background-color: #DBD5FF;
 271 }
 272
 273 /* classes specific to the MONTH view */
 274 .month_daylink {
 275     width:95%;
 276     font-size: 0.8em;
 277     text-align:right;
 278     background-color: #FFF;
 279     padding:1px 2px 1px 2px;
 280 }
 281 .month_dateheader {
 282     font-size: 0.7em;
 283     width:13%;
 284 }
 285 .month_event {
 286     font-size: 0.8em;
 287     width: 100%;
 288 }
 289
 290 /* types of events */
 291 .event {
 292     position: absolute;
 293     width: 100%;
 294 }
 295 .event img {
 296     vertical-align:middle;
 297 }
 298 .event_in {
 299     background-color: white;
 300     z-index:1;
 301     white-space: nowrap;
 302     width: 100%;
 303     overflow: hidden;
 304     text-overflow: ellipsis;
 305     border: 1px solid #000000;
 306 }
 307
 308 .event_appointment {
 309     background-color: white;
 310     z-index:2;
 311     overflow: hidden;
 312     border: 1px solid #ccc;
 313     white-space: nowrap;
 314     width: 100%;
 315     overflow: hidden;
 316     text-overflow: ellipsis;
 317     border: 1px solid #000000;
 318 }
 319 .event_noshow {
 320     background-color: pink;
 321     z-index:2;
 322     overflow: hidden;
 323     border: 1px solid #fcc;
 324 }
 325 .event_reserved {
 326     background-color: pink;
 327     z-index:2;
 328     overflow: hidden;
 329     border: 1px solid #cfc;
 330 }
 331 .event_holiday {
 332     background-color: mediumpurple;
 333     z-index:2;
 334     overflow: hidden;
 335     border: 1px solid #cfc;
 336 }
 337 .event_highlight {
 338     font-weight: bold;
 339     border-top: 1px solid #999;
 340     border-left: 1px solid #999;
 341     border-right: 2px solid #666;
 342     border-bottom: 2px solid #666;
 343     margin: -3px;
 344     background-color: black;
 345     white-space: nowrap;
 346     overflow: hidden;
 347     text-overflow: ellipsis;
 348     border: 1px solid #000000;
 349 }
 350 .event_time
 351 {
 352     cursor: pointer;
 353 }
 354 .event_time:hover
 355 {
 356     color: red;
 357 }
 358
 359 .show-appointment {
 360     position: absolute;
 361     bottom: 2px;
 362     right: 4px;
 363     font-family: 'FontAwesome';
 364 }
 365
 366 .show-appointment.unshown::before {
 367     cursor: pointer;
 368     content: "\f06e";
 369 }
 370
 371 .show-appointment.shown::before {
 372     cursor: pointer;
 373     content: "\f070";
 374 }
 375
 376 .view1 {
 377     font-size:10px;
 378 }
 379 .view2 {
 380     background-color:#94D6E7;
 381     font-size:10px;
 382 }
 383
 384 .in_start
 385 {
 386     background: transparent;
 387     z-index:2;
 388 }
 389 .event_out.event_highlight, .in_start.event_highlight {
 390     font-weight: bold;
 391     border-top: 1px solid #999;
 392     border-left: 1px solid #999;
 393     border-right: 2px solid #666;
 394     border-bottom: 2px solid #666;
 395     margin: 0px;
 396     background-color: yellow;
 397     opacity: 1;
 398     z-index: 2;
 399     cursor: pointer;
 400 }
 401
 402 .event_out{
 403     z-index: 3;
 404     background-color:#ff7533;
 405 }
 406 .weekend-day{
 407     background: rgba(146, 115, 214, 0.33);
 408 }
 409
 410 .event_holiday{
 411     width:100% !important;
 412 }
 413
 414 .pop-up img {
 415     width: 150px;
 416     margin: 10px;
 417 }