theme/bootstrapbase/less/moodle/calendar.less

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