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         caption {
 320             font-size: inherit;
 321             font-weight: inherit;
 322             line-height: inherit;
 323             text-align: center;
 324         }
 325     }
 326     .calendar-event-panel {
 327         background-color: @grayLighter;
 328         border: 1px solid @grayLighter;
 329         .yui3-overlay-content {
 330             padding: 19px;
 331             background-color: lighten(@wellBackground, 3%);
 332             border: 1px solid darken(@wellBackground, 7%);
 333             .border-radius(@baseBorderRadius);
 334             .box-shadow(inset 0 1px 1px rgba(0 ,0 ,0 , .05));
 335             h2 {
 336                 &.eventtitle {
 337                     line-height: 1.2;
 338                     font-size: 18px;
 339                 }
 340             }
 341             .eventcontent {
 342                 img {
 343                     padding-right: 5px;
 344                 }
 345             }
 346         }
 347     }
 348     .calendar-controls {
 349         .previous,
 350         .current,
 351         .next {
 352             display: block;
 353             float: left;
 354         }
 355         .previous {
 356             text-align: left;
 357             width: 12%;
 358         }
 359         .current {
 360             text-align: center;
 361             width: 76%;
 362         }
 363         .next {
 364             text-align: right;
 365             width: 12%;
 366         }
 367     }
 368     .calendar_filters {
 369         ul {
 370             list-style: none;
 371             margin: 0;
 372         }
 373         li {
 374             margin-bottom: 0.2em;
 375             span {
 376                 img {
 377                     padding: 0 0.2em;
 378                 }
 379             }
 380         }
 381         .eventname {
 382             padding-left: 0.2em;
 383         }
 384     }
 385     .content {
 386         h3 {
 387             &.eventskey {
 388                 margin-top: 0.5em;
 389             }
 390         }
 391     }
 392 }
 393
 394 // RTL overrides for block minicalendar.
 395 .dir-rtl {
 396     .block {
 397         .calendar_filters {
 398             .eventname {
 399                 padding-right: 0.2em;
 400                 padding-left: 0;
 401             }
 402         }
 403         .calendar-event-panel {
 404             .yui3-overlay-content {
 405                 .eventcontent {
 406                     img {
 407                         padding-right: 0;
 408                         padding-left: 5px;
 409                     }
 410                 }
 411             }
 412         }
 413     }
 414 }
 415
 416 .ical-link {
 417     font-size: 10px;
 418     font-weight: bold;
 419     background-color: #f60;
 420     padding: 0px 5px;
 421     color: #fff;
 422     border-top: 1px solid #f93;
 423     border-left: 1px solid #f93;
 424     border-bottom: 1px solid #013;
 425     border-right: 1px solid #013;
 426 }
 427 .ical-link:hover,
 428 .ical-link:active,
 429 .ical-link:focus,
 430 .ical-link:visited {
 431     color: #fff;
 432     text-decoration: none;
 433 }
 434
 435 @media (min-width: 768px) {
 436     #page-calender-view {
 437         .container-fluid {
 438             min-width: 1024px;
 439         }
 440     }
 441 }