[Summary view] [Print] [Text view]

   1  /* calendar.less */
   2  
   3  // Calendar colour variables defined.
   4  @calendarEventCourseColor: #ffd3bd; // Pale red.
   5  @calendarEventGlobalColor: #d6f8cd; // Pale green.
   6  @calendarEventGroupColor:  #fee7ae; // Pale yellow.
   7  @calendarEventUserColor:   #dce7ec; // Pale blue.
   8  
   9  // Calendar event background colours defined.
  10  .calendar_event_course {
  11      background-color: @calendarEventCourseColor;
  12  }
  13  .calendar_event_global {
  14      background-color: @calendarEventGlobalColor;
  15  }
  16  .calendar_event_group {
  17      background-color: @calendarEventGroupColor;
  18  }
  19  .calendar_event_user {
  20      background-color: @calendarEventUserColor;
  21  }
  22  
  23  // Calendar restyling.
  24  .path-calendar {
  25      .calendartable {
  26          width: 100%;
  27          th,
  28          td {
  29              width: 14%;
  30              vertical-align: top;
  31              text-align: center;
  32              border: 0;
  33          }
  34      }
  35      .calendar-controls {
  36          .previous,
  37          .next,
  38          .current {
  39              display: block;
  40              float: left;
  41              width: 12%;
  42          }
  43          .previous {
  44              text-align: left;
  45          }
  46          .current {
  47              text-align: center;
  48              width: 76%;
  49          }
  50          .next {
  51              text-align: right;
  52          }
  53      }
  54      .filters {
  55          table {
  56              border-collapse: separate;
  57              border-spacing: 2px;
  58              width: 100%;
  59          }
  60      }
  61      .cal_courses_flt {
  62          float: left;
  63  
  64          label {
  65              margin-right: .45em;
  66          }
  67      }
  68      .maincalendar {
  69          vertical-align: top;
  70          padding: 0;
  71          .bottom {
  72              text-align: center;
  73              padding: 5px 0 0 0;
  74          }
  75          .heightcontainer {
  76              height: 100%;
  77              position: relative;
  78          }
  79          .calendarmonth {
  80              width: 98%;
  81              margin: 10px auto;
  82          }
  83          .calendarmonth {
  84              ul {
  85                  margin: 0;
  86                  li {
  87                      list-style-type: none;
  88                      margin-top: 4px;
  89                  }
  90              }
  91              td {
  92                  height: 5em;
  93              }
  94          }
  95          .calendar-controls {
  96              .previous,
  97              .next {
  98                  width: 30%;
  99              }
 100              .current {
 101                  width: 39.95%;
 102              }
 103          }
 104          .controls {
 105              width: 98%;
 106              margin: 10px auto;
 107          }
 108          .calendar_event_course,
 109          .calendar_event_global,
 110          .calendar_event_group,
 111          .calendar_event_user {
 112              border-width: 1px 1px 1px 12px;
 113              border-style: solid;
 114          }
 115          .calendar_event_course {
 116              border-color: @calendarEventCourseColor;
 117          }
 118          .calendar_event_global {
 119              border-color: @calendarEventGlobalColor;
 120          }
 121          .calendar_event_group {
 122              border-color: @calendarEventGroupColor;
 123          }
 124          .calendar_event_user {
 125              border-color: @calendarEventUserColor;
 126          }
 127          .calendar-event-panel {
 128              background-color: @grayLighter;
 129              border: 2px solid @grayLighter;
 130              .yui3-overlay-content {
 131                  padding: 19px;
 132                  background-color: lighten(@wellBackground, 3%);
 133                  border: 1px solid darken(@wellBackground, 7%);
 134                  .border-radius(@baseBorderRadius);
 135                  .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05));
 136              }
 137          }
 138          .calendar-controls {
 139              .current {
 140                  font-family: @headingsFontFamily;
 141                  font-weight: @headingsFontWeight;
 142                  color: @headingsColor;
 143                  font-size: 25px;
 144                  line-height: 1.2;
 145              }
 146          }
 147          .calendartable {
 148              td,
 149              li {
 150                  padding: 5px;
 151              }
 152              li {
 153                  padding-left: 10px;
 154                  text-align: left;
 155              }
 156          }
 157          .header {
 158              overflow: hidden;
 159              .buttons {
 160                  float: right;
 161              }
 162          }
 163          .eventlist {
 164              margin: 0;
 165  
 166              .event {
 167                  width: 92%;
 168                  border-spacing: 0;
 169                  border-collapse: separate;
 170                  position: relative;
 171                  padding: 20px 4%;
 172                  margin-bottom: 20px;
 173                  background-color: lighten(@wellBackground, 3%);
 174                  border: 1px solid darken(@wellBackground, 7%);
 175                  .border-radius(@baseBorderRadius);
 176                  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
 177                  list-style-type: none;
 178  
 179                  > img {
 180                      padding-top: 3px;
 181                      float: left;
 182                  }
 183                  .name {
 184                      font-size: @fontSizeLarge;
 185                      font-weight: 200;
 186                      line-height: 24px;
 187                      float: left;
 188                      margin: 0;
 189                  }
 190                  .name,
 191                  .course {
 192                      margin-bottom: 5px;
 193                  }
 194                  .date {
 195                      float: right;
 196                  }
 197                  .course,
 198                  .subscription {
 199                      float: left;
 200                      clear: left;
 201                  }
 202                  .side {
 203                      width: 22px;
 204                  }
 205                  .description {
 206                      background-color: @white;
 207                      padding: 5px;
 208                      clear: both;
 209                      .commands {
 210                          position: absolute;
 211                          right: 0;
 212                          top: 0;
 213                          margin: 3px;
 214                      }
 215                  }
 216                  .commands {
 217                      position: absolute;
 218                      top: 2px;
 219                      right: 2px;
 220                      a {
 221                          margin: 0 3px;
 222                      }
 223                  }
 224              }
 225          }
 226      }
 227  }
 228  
 229  // RTL overrides for main calendar.
 230  .dir-rtl.path-calendar {
 231      .cal_courses_flt {
 232          float: right;
 233          label {
 234              margin-left: .45em;
 235              margin-right: 0;
 236          }
 237      }
 238      .maincalendar {
 239          .calendar_event_course,
 240          .calendar_event_global,
 241          .calendar_event_group,
 242          .calendar_event_user {
 243              border-left-width: 1px;
 244              border-right-width: 12px;
 245          }
 246          .calendar-controls {
 247              .next {
 248                  text-align: left;
 249              }
 250              .previous {
 251                  text-align: right;
 252              }
 253          }
 254          .calendartable {
 255              td,
 256              li {
 257                  text-align: right;
 258              }
 259              li {
 260                  padding-right: 10px;
 261                  padding-left: 5px;
 262              }
 263          }
 264          .header {
 265              .buttons {
 266                  float: left;
 267              }
 268          }
 269          .eventlist {
 270              .event {
 271                  > img {
 272                      float: right;
 273                  }
 274                  .name {
 275                      float: right;
 276                  }
 277                  .date {
 278                      float: left;
 279                  }
 280                  .description {
 281                      .commands {
 282                          right: inherit;
 283                          left: 0;
 284                      }
 285                  }
 286                  .course,
 287                  .subscription {
 288                      float: right;
 289                      clear: right;
 290                  }
 291                  .commands {
 292                      left: 2px;
 293                      right: inherit;
 294                  }
 295              }
 296          }
 297      }
 298  }
 299  // Calendar export.
 300  #page-calendar-export {
 301      .indent {
 302          padding-left: 20px;
 303      }
 304  }
 305  
 306  // Block minicalendar.
 307  .block {
 308      .minicalendar {
 309          max-width: 280px;
 310          margin: 0 auto;
 311          width: 100%;
 312          th,
 313          td {
 314              padding: 2px;
 315              font-size: 0.8em;
 316              text-align: center;
 317          }
 318          td {
 319              &.weekend {
 320                  .muted;
 321              }
 322              a {
 323                  width: 100%;
 324                  height: 100%;
 325                  display: block;
 326              }
 327              &.duration_global {
 328                  border-top: 1px solid @calendarEventGlobalColor;
 329                  border-bottom: 1px solid @calendarEventGlobalColor;
 330                  &.duration_finish {
 331                      background-color: @calendarEventGlobalColor;
 332                  }
 333              }
 334              &.duration_course {
 335                  border-top: 1px solid @calendarEventCourseColor;
 336                  border-bottom: 1px solid @calendarEventCourseColor;
 337                  &.duration_finish {
 338                      background-color: @calendarEventCourseColor;
 339                  }
 340              }
 341              &.duration_group {
 342                  border-top: 1px solid @calendarEventGroupColor;
 343                  border-bottom: 1px solid @calendarEventGroupColor;
 344                  &.duration_finish {
 345                      background-color: @calendarEventGroupColor;
 346                  }
 347              }
 348              &.duration_user {
 349                  border-top: 1px solid @calendarEventUserColor;
 350                  border-bottom: 1px solid @calendarEventUserColor;
 351                  &.duration_finish {
 352                      background-color: @calendarEventUserColor;
 353                  }
 354              }
 355          }
 356          caption {
 357              font-size: inherit;
 358              font-weight: inherit;
 359              line-height: inherit;
 360              text-align: center;
 361          }
 362      }
 363      .calendar-event-panel {
 364          background-color: @grayLighter;
 365          border: 1px solid @grayLighter;
 366          .yui3-overlay-content {
 367              padding: 19px;
 368              background-color: lighten(@wellBackground, 3%);
 369              border: 1px solid darken(@wellBackground, 7%);
 370              .border-radius(@baseBorderRadius);
 371              .box-shadow(inset 0 1px 1px rgba(0 ,0 ,0 , .05));
 372              h2 {
 373                  &.eventtitle {
 374                      line-height: 1.2;
 375                      font-size: 18px;
 376                  }
 377              }
 378              .eventcontent {
 379                  img {
 380                      padding-right: 5px;
 381                  }
 382              }
 383          }
 384      }
 385      .calendar-controls {
 386          .previous,
 387          .current,
 388          .next {
 389              display: block;
 390              float: left;
 391          }
 392          .previous {
 393              text-align: left;
 394              width: 12%;
 395          }
 396          .current {
 397              text-align: center;
 398              width: 76%;
 399          }
 400          .next {
 401              text-align: right;
 402              width: 12%;
 403          }
 404      }
 405      .calendar_filters {
 406          ul {
 407              list-style: none;
 408              margin: 0;
 409          }
 410          li {
 411              margin-bottom: 0.2em;
 412              span {
 413                  img {
 414                      padding: 0 0.2em;
 415                  }
 416              }
 417          }
 418          .eventname {
 419              padding-left: 0.2em;
 420          }
 421      }
 422      .content {
 423          h3 {
 424              &.eventskey {
 425                  margin-top: 0.5em;
 426              }
 427          }
 428      }
 429  }
 430  
 431  // RTL overrides for block minicalendar.
 432  .dir-rtl {
 433      .block {
 434          .calendar_filters {
 435              .eventname {
 436                  padding-right: 0.2em;
 437                  padding-left: 0;
 438              }
 439          }
 440          .calendar-event-panel {
 441              .yui3-overlay-content {
 442                  .eventcontent {
 443                      img {
 444                          padding-right: 0;
 445                          padding-left: 5px;
 446                      }
 447                  }
 448              }
 449          }
 450      }
 451  }
 452  
 453  .ical-link {
 454      font-size: 10px;
 455      font-weight: bold;
 456      background-color: #f60;
 457      padding: 0px 5px;
 458      color: #fff;
 459      border-top: 1px solid #f93;
 460      border-left: 1px solid #f93;
 461      border-bottom: 1px solid #013;
 462      border-right: 1px solid #013;
 463  }
 464  .ical-link:hover,
 465  .ical-link:active,
 466  .ical-link:focus,
 467  .ical-link:visited {
 468      color: #fff;
 469      text-decoration: none;
 470  }
 471  
 472  @media (min-width: 768px) {
 473      #page-calender-view {
 474          .container-fluid {
 475              min-width: 1024px;
 476          }
 477      }
 478  }