mod/lti/styles.css

   1 .path-mod-lti .ltiframe {
   2     position: relative;
   3     width: 100%;
   4     height: 100%;
   5 }
   6
   7 /** General Styles **/
   8 .path-mod-lti .userpicture,
   9 .path-mod-lti .picture.user,
  10 .path-mod-lti .picture.teacher {
  11     width: 35px;
  12     height: 35px;
  13     vertical-align: top;
  14 }
  15
  16 .path-mod-lti .feedback .files,
  17 .path-mod-lti .feedback .grade,
  18 .path-mod-lti .feedback .outcome,
  19 .path-mod-lti .feedback .finalgrade {
  20     float: right;
  21 }
  22
  23 .path-mod-lti .feedback .disabledfeedback {
  24     width: 500px;
  25     height: 250px;
  26 }
  27
  28 .path-mod-lti .feedback .from {
  29     float: left;
  30 }
  31
  32 .path-mod-lti .files img {
  33     margin-right: 4px;
  34 }
  35
  36 .path-mod-lti .files a {
  37     white-space: nowrap;
  38 }
  39
  40 .path-mod-lti .late {
  41     color: red;
  42 }
  43
  44 /* Styles for admin */
  45 .path-admin-mod-lti .mform .fitem .fitemtitle {
  46     min-width: 18em;
  47     padding-right: 1em;
  48 } /* Prevent setting titles from wrapping */
  49
  50 /* Styles for instructor editing an external tool */
  51
  52 .path-mod-lti .mform .fitem .fitemtitle {
  53     min-width: 14em;
  54     padding-right: 1em;
  55 } /* Prevent setting titles from wrapping */
  56
  57 /* Styling for tool_configure page */
  58 #registration-choice-container .buffer-text {
  59     margin: 20px;
  60 }
  61
  62 #choice-list {
  63     list-style: none;
  64     border-bottom: 1px solid #e3e3e3;
  65     padding-bottom: 1em;
  66     margin-left: 0;
  67 }
  68
  69 #choice-list > li {
  70     display: inline-block;
  71 }
  72
  73 #external-registration-container iframe {
  74     border: 1px solid #e5e5e5;
  75     border-radius: 10px;
  76     width: 100%;
  77     min-height: 800px;
  78 }
  79
  80 .loading-screen {
  81     text-align: center;
  82     padding: 3em;
  83 }
  84
  85 .loading-screen .loading-text {
  86     font-size: 2em;
  87 }
  88
  89 .loading-screen .loader {
  90     margin-left: auto;
  91     margin-right: auto;
  92     margin-bottom: 1em;
  93     height: 2em;
  94     width: 2em;
  95     font-size: 2em;
  96 }
  97
  98 #registration-submit {
  99     min-width: 140px;
 100 }
 101
 102 #registration-form-container {
 103     min-height: 260px;
 104 }
 105
 106 #registration-form-container .card {
 107     margin-bottom: 0;
 108 }
 109
 110 #registration-form-container .control-group:last-child {
 111     margin-bottom: 0;
 112 }
 113
 114 #registration-choice-container .card {
 115     text-align: center;
 116 }
 117
 118 #registration-choice-container .btn-toolbar {
 119     margin-bottom: 0;
 120 }
 121
 122 #registration-choice-container p:last-child {
 123     margin-top: 20px;
 124 }
 125
 126 #tool-type-capabilities-container .registration-loading-container {
 127     display: none;
 128 }
 129
 130 #tool-type-capabilities-container.loading .registration-loading-container {
 131     display: block;
 132 }
 133
 134 #tool-type-capabilities-container.loading #tool-type-capabilities-template-container {
 135     display: none;
 136 }
 137
 138 .centered-menu {
 139     max-width: 70%;
 140     margin-left: auto;
 141     margin-right: auto;
 142 }
 143
 144 .btn-text {
 145     display: block;
 146 }
 147
 148 .btn-loader {
 149     display: none;
 150 }
 151
 152 .loading .btn-text {
 153     display: none;
 154 }
 155
 156 .loading .btn-loader {
 157     display: block;
 158 }
 159
 160 .btn .loader {
 161     margin-left: auto;
 162     margin-right: auto;
 163 }
 164
 165 .btn .loader img {
 166     height: 1.5em;
 167 }
 168
 169 #tool-list-container h3 {
 170     display: inline-block;
 171 }
 172
 173 #tool-list-loader-container {
 174     display: inline-block;
 175 }
 176
 177 #tool-list-loader-container .loader {
 178     display: none;
 179 }
 180
 181 #tool-list-loader-container .loader img {
 182     height: 2em;
 183 }
 184
 185 .loading #tool-list-loader-container .loader {
 186     display: block;
 187 }
 188
 189 .loading #tool-notools-text {
 190     display: none;
 191 }
 192
 193 .tool-card {
 194     display: inline-block;
 195     width: 250px;
 196     height: 300px;
 197     border: 1px solid #e5e5e5;
 198     border-radius: 10px;
 199     margin: 5px;
 200     position: relative;
 201     box-sizing: border-box;
 202     vertical-align: top;
 203 }
 204
 205 .tool-card:hover,
 206 .tool-card:focus {
 207     border-color: #08c;
 208     box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
 209     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
 210     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
 211     -o-transition: border linear 0.2s, box-shadow linear 0.2s;
 212     transition: border linear 0.2s, box-shadow linear 0.2s;
 213 }
 214
 215 .tool-card .overlay-container {
 216     background-color: rgba(255, 255, 255, 0.8);
 217     border-radius: 10px;
 218     display: none;
 219     height: 100%;
 220     left: 0;
 221     position: absolute;
 222     text-align: center;
 223     top: 0;
 224     width: 100%;
 225     z-index: 100;
 226     box-sizing: border-box;
 227     padding: 10px;
 228 }
 229
 230 .tool-card .overlay-container .img-container {
 231     position: absolute;
 232     top: 115px;
 233     left: 90px;
 234     display: block;
 235     width: 70px;
 236     height: 70px;
 237 }
 238
 239 .tool-card .overlay-container .img-container img {
 240     height: 100%;
 241     width: 100%;
 242 }
 243
 244 .tool-card.announcement > .overlay-container {
 245     display: block;
 246 }
 247
 248 .tool-card.announcement .overlay-container .loader {
 249     display: none;
 250 }
 251
 252 .tool-card.announcement.loading .overlay-container .loader {
 253     display: block;
 254     width: 100%;
 255     height: 100%;
 256 }
 257
 258 .tool-card.announcement .overlay-container .success-icon-container {
 259     display: none;
 260 }
 261
 262 .tool-card.announcement.success .overlay-container .success-icon-container {
 263     display: block;
 264 }
 265
 266 .tool-card.announcement .overlay-container .fail-icon-container {
 267     display: none;
 268 }
 269
 270 .tool-card.announcement.fail .overlay-container .fail-icon-container {
 271     display: block;
 272 }
 273
 274 .tool-card.announcement .overlay-container .capabilities-container {
 275     display: none;
 276 }
 277
 278 .tool-card.announcement.capabilities .overlay-container .capabilities-container {
 279     display: block;
 280 }
 281
 282 .tool-card.announcement.capabilities .overlay-container {
 283     background-color: rgb(255, 255, 255);
 284 }
 285
 286 .tool-card.announcement.capabilities .overlay-container .img-container {
 287     display: none;
 288 }
 289
 290 .tool-card-content {
 291     z-index: 1;
 292 }
 293
 294 .tool-card-header {
 295     text-align: center;
 296     background-color: #f5f5f5;
 297     padding: 10px;
 298     border-top-left-radius: 10px;
 299     border-top-right-radius: 10px;
 300     box-sizing: border-box;
 301     height: 125px;
 302 }
 303
 304 .tool-card-subheader {
 305     margin-bottom: 10px;
 306     text-align: left;
 307 }
 308
 309 .tool-card-header .tool-card-icon {
 310     width: 35px;
 311     height: 35px;
 312 }
 313
 314 .tool-card-header .name {
 315     margin-bottom: 0;
 316     white-space: nowrap;
 317 }
 318
 319 .tool-card-header .tool-card-actions {
 320     float: right;
 321 }
 322
 323 .tool-card-header .tool-card-actions img {
 324     width: 15px;
 325     height: 15px;
 326     margin-left: 7px;
 327 }
 328
 329 .tool-card-body {
 330     border-top: 1px solid #e5e5e5;
 331     box-sizing: border-box;
 332     padding: 5px;
 333     height: 125px;
 334 }
 335
 336 .tool-card-body .description {
 337     max-height: 100px;
 338     word-wrap: break-word;
 339 }
 340
 341 .tool-card-footer {
 342     height: 50px;
 343     text-align: center;
 344     padding-top: 10px;
 345     box-sizing: border-box;
 346 }
 347
 348 .tool-card .contenteditable-container {
 349     position: relative;
 350 }
 351
 352 .tool-card [contenteditable=true] {
 353     border: 1px solid transparent;
 354     padding: 0.25em;
 355     position: relative;
 356     z-index: 1;
 357     overflow: auto;
 358 }
 359
 360 .tool-card [contenteditable=true]:hover {
 361     border-radius: 4px;
 362     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 363     background-color: #fff;
 364     border: 1px solid #e3e3e3;
 365     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
 366     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
 367     -o-transition: border linear 0.2s, box-shadow linear 0.2s;
 368     transition: border linear 0.2s, box-shadow linear 0.2s;
 369     cursor: text;
 370 }
 371
 372 .tool-card [contenteditable=true]:focus {
 373     outline: 0;
 374     border-radius: 4px;
 375     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
 376     background-color: #fff;
 377     border: 1px solid rgba(82, 168, 236, 0.8);
 378     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
 379     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
 380     -o-transition: border linear 0.2s, box-shadow linear 0.2s;
 381     transition: border linear 0.2s, box-shadow linear 0.2s;
 382     cursor: text;
 383 }
 384
 385 .tool-card [contenteditable=true].loading + .overlay-container {
 386     border-radius: 4px;
 387     display: block;
 388 }
 389
 390 .tool-card [contenteditable=true] + .overlay-container .loader {
 391     display: inline-block;
 392     vertical-align: middle;
 393 }
 394
 395 #accordion.modltitree {
 396     border-radius: 4px;
 397     padding-left: 8px;
 398 }
 399
 400 #accordion.modltitree .accordion-inner {
 401     padding-left: 20px;
 402 }
 403
 404 #accordion.modltitree .accordion-inner .accordion p {
 405     margin-bottom: 0;
 406     padding-left: 15px;
 407 }
 408
 409 #accordion.modltitree .accordion-group {
 410     padding-left: 15px;
 411     padding-bottom: 4px;
 412     position: relative;
 413 }
 414
 415 #accordion.modltitree .accordion-group span {
 416     padding: 0 4px 0;
 417 }
 418
 419 #accordion.modltitree .accordion-group .accordion-heading .accordion-toggle::before {
 420     content: url([[pix:t/expanded]]);
 421     position: absolute;
 422     left: -5px;
 423 }
 424
 425 #accordion.modltitree .accordion-group .accordion-heading .accordion-toggle.collapsed::before {
 426     content: url([[pix:t/collapsed]]);
 427 }
 428
 429 /* Styling for LTI view */
 430 #contentframe {
 431     border: 1px solid #ddd;
 432     border-radius: 4px;
 433 }
 434
 435 /* Strip the caret from the action menu toggle, as the ... ellipsis icon is used. */
 436 #page-mod-lti-coursetools a.dropdown-toggle::after {
 437     display: none;
 438 }
 439
 440 /* Icons in the 'actions' column of the course tools table need to be aligned with action menus which have a 36x36 trigger. */
 441 #page-mod-lti-coursetools table div.tool-action-icon-container {
 442     display: flex;
 443     align-items: center;
 444     justify-content: center;
 445     width: 36px;
 446     height: 36px;
 447 }
 448
 449 #page-mod-lti-coursetools table div.tool-action-icon-container i {
 450     margin: 0;
 451 }
 452
 453 /* The following removes the striping that lives in table_sql, which we can't change from within reportbuilder */
 454 #page-mod-lti-coursetools table.generaltable tbody tr:nth-of-type(2n+1),
 455 #page-mod-lti-coursetools table.table-striped tbody tr:nth-of-type(2n+1) {
 456     background: inherit;
 457 }
 458
 459 #page-mod-lti-coursetools table.generaltable tbody tr:hover,
 460 #page-mod-lti-coursetools table.table-striped tbody tr:hover {
 461     background: #fff;
 462 }