theme/bootstrapbase/less/moodle/calendar.less

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