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_site {
  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     #dateselector-calendar-panel {
  26         z-index: @zindexModalContainer+4;
  27     }
  28     .calendartable {
  29         width: 100%;
  30         th,
  31         td {
  32             width: 14%;
  33             vertical-align: top;
  34             text-align: center;
  35             border: 0;
  36         }
  37     }
  38     .calendar-controls {
  39         .previous,
  40         .next,
  41         .current {
  42             display: block;
  43             float: left;
  44             width: 12%;
  45         }
  46         .previous {
  47             text-align: left;
  48         }
  49         .current {
  50             text-align: center;
  51             width: 76%;
  52         }
  53         .next {
  54             text-align: right;
  55         }
  56     }
  57     .filters {
  58         table {
  59             border-collapse: separate;
  60             border-spacing: 2px;
  61             width: 100%;
  62         }
  63     }
  64     .cal_courses_flt {
  65         float: left;
  66
  67         label {
  68             margin-right: .45em;
  69         }
  70     }
  71     .maincalendar {
  72         vertical-align: top;
  73         padding: 0;
  74         .bottom {
  75             text-align: center;
  76             padding: 5px 0 0 0;
  77         }
  78         .heightcontainer {
  79             height: 100%;
  80             position: relative;
  81         }
  82         .calendarmonth {
  83             width: 98%;
  84             margin: 10px auto;
  85         }
  86         .calendarmonth {
  87             ul {
  88                 margin: 0;
  89                 li {
  90                     list-style-type: none;
  91                     margin-top: 4px;
  92                 }
  93             }
  94             td {
  95                 height: 5em;
  96             }
  97         }
  98         .calendar-controls {
  99             .previous,
 100             .next {
 101                 width: 30%;
 102             }
 103             .current {
 104                 width: 39.95%;
 105             }
 106         }
 107         .controls {
 108             width: 98%;
 109             margin: 10px auto;
 110         }
 111         .calendar_event_course,
 112         .calendar_event_site,
 113         .calendar_event_group,
 114         .calendar_event_user {
 115             border-width: 1px 1px 1px 12px;
 116             border-style: solid;
 117         }
 118         .calendar_event_course {
 119             border-color: @calendarEventCourseColor;
 120         }
 121         .calendar_event_site {
 122             border-color: @calendarEventGlobalColor;
 123         }
 124         .calendar_event_group {
 125             border-color: @calendarEventGroupColor;
 126         }
 127         .calendar_event_user {
 128             border-color: @calendarEventUserColor;
 129         }
 130         .calendar-controls {
 131             .current {
 132                 font-family: @headingsFontFamily;
 133                 font-weight: @headingsFontWeight;
 134                 color: @headingsColor;
 135                 font-size: 25px;
 136                 line-height: 1.2;
 137             }
 138         }
 139         .calendartable {
 140             td,
 141             li {
 142                 padding: 5px;
 143             }
 144             li {
 145                 padding-left: 10px;
 146                 text-align: left;
 147             }
 148         }
 149         .header {
 150             overflow: hidden;
 151             .buttons {
 152                 float: right;
 153             }
 154         }
 155         .eventlist {
 156             margin: 0;
 157
 158             .event {
 159                 border-spacing: 0;
 160                 border-collapse: separate;
 161                 position: relative;
 162                 margin-bottom: 20px;
 163                 list-style-type: none;
 164
 165                 > img {
 166                     padding-top: 3px;
 167                     float: left;
 168                 }
 169                 .name {
 170                     font-size: @fontSizeLarge;
 171                     font-weight: 200;
 172                     line-height: 24px;
 173                     float: left;
 174                     margin: 0;
 175                     margin-right: 0.5rem;
 176                 }
 177                 .name,
 178                 .course {
 179                     margin-bottom: 5px;
 180                 }
 181                 .date {
 182                     float: right;
 183                 }
 184                 .course,
 185                 .subscription {
 186                     float: left;
 187                     clear: left;
 188                 }
 189                 .side {
 190                     width: 22px;
 191                 }
 192                 .description {
 193                     background-color: @white;
 194                     clear: both;
 195                 }
 196                 .commands {
 197                     a {
 198                         margin: 0 3px;
 199                     }
 200                 }
 201             }
 202         }
 203     }
 204 }
 205
 206 // Calendar export.
 207 #page-calendar-export {
 208     .indent {
 209         padding-left: 20px;
 210     }
 211 }
 212
 213 // Block minicalendar.
 214 .block {
 215     .minicalendar {
 216         max-width: 280px;
 217         margin: 0 auto;
 218         width: 100%;
 219         th,
 220         td {
 221             padding: 2px;
 222             font-size: 0.8em;
 223             text-align: center;
 224         }
 225         td {
 226             &.weekend {
 227                 .muted;
 228             }
 229             a {
 230                 width: 100%;
 231                 height: 100%;
 232                 display: block;
 233             }
 234             &.duration_global {
 235                 border-top: 1px solid @calendarEventGlobalColor;
 236                 border-bottom: 1px solid @calendarEventGlobalColor;
 237                 &.duration_finish {
 238                     background-color: @calendarEventGlobalColor;
 239                 }
 240             }
 241             &.duration_course {
 242                 border-top: 1px solid @calendarEventCourseColor;
 243                 border-bottom: 1px solid @calendarEventCourseColor;
 244                 &.duration_finish {
 245                     background-color: @calendarEventCourseColor;
 246                 }
 247             }
 248             &.duration_group {
 249                 border-top: 1px solid @calendarEventGroupColor;
 250                 border-bottom: 1px solid @calendarEventGroupColor;
 251                 &.duration_finish {
 252                     background-color: @calendarEventGroupColor;
 253                 }
 254             }
 255             &.duration_user {
 256                 border-top: 1px solid @calendarEventUserColor;
 257                 border-bottom: 1px solid @calendarEventUserColor;
 258                 &.duration_finish {
 259                     background-color: @calendarEventUserColor;
 260                 }
 261             }
 262         }
 263         caption {
 264             font-size: inherit;
 265             font-weight: inherit;
 266             line-height: inherit;
 267             text-align: center;
 268         }
 269     }
 270     .calendar-controls {
 271         .previous,
 272         .current,
 273         .next {
 274             display: block;
 275             float: left;
 276         }
 277         .previous {
 278             text-align: left;
 279             width: 12%;
 280         }
 281         .current {
 282             text-align: center;
 283             width: 76%;
 284         }
 285         .next {
 286             text-align: right;
 287             width: 12%;
 288         }
 289     }
 290     .calendar_filters {
 291         ul {
 292             list-style: none;
 293             margin: 0;
 294         }
 295         li {
 296             margin-bottom: 0.2em;
 297             span {
 298                 img {
 299                     padding: 0 0.2em;
 300                 }
 301             }
 302         }
 303         .eventname {
 304             padding-left: 0.2em;
 305         }
 306     }
 307     .content {
 308         h3 {
 309             &.eventskey {
 310                 margin-top: 0.5em;
 311             }
 312         }
 313     }
 314 }
 315
 316 .ical-link {
 317     font-size: 10px;
 318     font-weight: bold;
 319     background-color: #f60;
 320     padding: 0 5px;
 321     color: #fff;
 322     border-top: 1px solid #f93;
 323     border-left: 1px solid #f93;
 324     border-bottom: 1px solid #013;
 325     border-right: 1px solid #013;
 326 }
 327 .ical-link:hover,
 328 .ical-link:active,
 329 .ical-link:focus,
 330 .ical-link:visited {
 331     color: #fff;
 332     text-decoration: none;
 333 }
 334
 335 @media (min-width: 768px) {
 336     #page-calender-view {
 337         .container-fluid {
 338             min-width: 1024px;
 339         }
 340     }
 341 }