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