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 .path-mod-lti .message {
  45     text-align: center;
  46 }
  47
  48 /* Styles for admin */
  49 .path-admin-mod-lti .mform .fitem .fitemtitle {
  50     min-width: 18em;
  51     padding-right: 1em;
  52 } /* Prevent setting titles from wrapping */
  53
  54 /* Styles for instructor editing an external tool */
  55
  56 .path-mod-lti .mform .fitem .fitemtitle {
  57     min-width: 14em;
  58     padding-right: 1em;
  59 } /* Prevent setting titles from wrapping */
  60
  61 /* Styles for instructor_edit_tool_type.php */
  62 #page-mod-lti-instructor_edit_tool_type .mform .fitem .fitemtitle {
  63     min-width: 18em;
  64     padding-right: 1em;
  65 } /* Prevent setting titles from wrapping */
  66
  67 /* Styling for tool_configure page */
  68 #registration-choice-container .buffer-text {
  69     margin: 20px;
  70 }
  71
  72 #choice-list {
  73     list-style: none;
  74     border-bottom: 1px solid #e3e3e3;
  75     padding-bottom: 1em;
  76     margin-left: 0;
  77 }
  78
  79 #choice-list > li {
  80     display: inline-block;
  81 }
  82
  83 #external-registration-container iframe {
  84     border: 1px solid #e5e5e5;
  85     border-radius: 10px;
  86     width: 100%;
  87     min-height: 800px;
  88 }
  89
  90 .loading-screen {
  91     text-align: center;
  92     padding: 3em;
  93 }
  94
  95 .loading-screen .loading-text {
  96     font-size: 2em;
  97 }
  98
  99 .loading-screen .loader {
 100     margin-left: auto;
 101     margin-right: auto;
 102     margin-bottom: 1em;
 103     height: 2em;
 104     width: 2em;
 105     font-size: 2em;
 106 }
 107
 108 #registration-submit {
 109     min-width: 140px;
 110 }
 111
 112 #registration-form-container {
 113     min-height: 260px;
 114 }
 115
 116 #registration-form-container .card {
 117     margin-bottom: 0;
 118 }
 119
 120 #registration-form-container .control-group:last-child {
 121     margin-bottom: 0;
 122 }
 123
 124 #registration-choice-container .card {
 125     text-align: center;
 126 }
 127
 128 #registration-choice-container .btn-toolbar {
 129     margin-bottom: 0;
 130 }
 131
 132 #registration-choice-container p:last-child {
 133     margin-top: 20px;
 134 }
 135
 136 #tool-type-capabilities-container .registration-loading-container {
 137     display: none;
 138 }
 139
 140 #tool-type-capabilities-container.loading .registration-loading-container {
 141     display: block;
 142 }
 143
 144 #tool-type-capabilities-container.loading #tool-type-capabilities-template-container {
 145     display: none;
 146 }
 147
 148 .centered-menu {
 149     max-width: 70%;
 150     margin-left: auto;
 151     margin-right: auto;
 152 }
 153
 154 .btn-text {
 155     display: block;
 156 }
 157
 158 .btn-loader {
 159     display: none;
 160 }
 161
 162 .loading .btn-text {
 163     display: none;
 164 }
 165
 166 .loading .btn-loader {
 167     display: block;
 168 }
 169
 170 .btn .loader {
 171     margin-left: auto;
 172     margin-right: auto;
 173 }
 174
 175 .btn .loader img {
 176     height: 1.5em;
 177 }
 178
 179 #tool-list-container h3 {
 180     display: inline-block;
 181 }
 182
 183 #tool-list-loader-container {
 184     display: inline-block;
 185 }
 186
 187 #tool-list-loader-container .loader {
 188     display: none;
 189 }
 190
 191 #tool-list-loader-container .loader img {
 192     height: 2em;
 193 }
 194
 195 .loading #tool-list-loader-container .loader {
 196     display: block;
 197 }
 198
 199 .loading #tool-notools-text {
 200     display: none;
 201 }
 202
 203 .tool-card {
 204     display: inline-block;
 205     width: 250px;
 206     height: 300px;
 207     border: 1px solid #e5e5e5;
 208     border-radius: 10px;
 209     margin: 5px;
 210     position: relative;
 211     box-sizing: border-box;
 212     vertical-align: top;
 213 }
 214
 215 .tool-card:hover,
 216 .tool-card:focus {
 217     border-color: #08c;
 218     box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
 219     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
 220     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
 221     -o-transition: border linear 0.2s, box-shadow linear 0.2s;
 222     transition: border linear 0.2s, box-shadow linear 0.2s;
 223 }
 224
 225 .tool-card .overlay-container {
 226     background-color: rgba(255, 255, 255, 0.8);
 227     border-radius: 10px;
 228     display: none;
 229     height: 100%;
 230     left: 0;
 231     position: absolute;
 232     text-align: center;
 233     top: 0;
 234     width: 100%;
 235     z-index: 100;
 236     box-sizing: border-box;
 237     padding: 10px;
 238 }
 239
 240 .tool-card .overlay-container .img-container {
 241     position: absolute;
 242     top: 115px;
 243     left: 90px;
 244     display: block;
 245     width: 70px;
 246     height: 70px;
 247 }
 248
 249 .tool-card .overlay-container .img-container img {
 250     height: 100%;
 251     width: 100%;
 252 }
 253
 254 .tool-card.announcement > .overlay-container {
 255     display: block;
 256 }
 257
 258 .tool-card.announcement .overlay-container .loader {
 259     display: none;
 260 }
 261
 262 .tool-card.announcement.loading .overlay-container .loader {
 263     display: block;
 264     width: 100%;
 265     height: 100%;
 266 }
 267
 268 .tool-card.announcement .overlay-container .success-icon-container {
 269     display: none;
 270 }
 271
 272 .tool-card.announcement.success .overlay-container .success-icon-container {
 273     display: block;
 274 }
 275
 276 .tool-card.announcement .overlay-container .fail-icon-container {
 277     display: none;
 278 }
 279
 280 .tool-card.announcement.fail .overlay-container .fail-icon-container {
 281     display: block;
 282 }
 283
 284 .tool-card.announcement .overlay-container .capabilities-container {
 285     display: none;
 286 }
 287
 288 .tool-card.announcement.capabilities .overlay-container .capabilities-container {
 289     display: block;
 290 }
 291
 292 .tool-card.announcement.capabilities .overlay-container {
 293     background-color: rgb(255, 255, 255);
 294 }
 295
 296 .tool-card.announcement.capabilities .overlay-container .img-container {
 297     display: none;
 298 }
 299
 300 .tool-card-content {
 301     z-index: 1;
 302 }
 303
 304 .tool-card-header {
 305     text-align: center;
 306     background-color: #f5f5f5;
 307     padding: 10px;
 308     border-top-left-radius: 10px;
 309     border-top-right-radius: 10px;
 310     box-sizing: border-box;
 311     height: 125px;
 312 }
 313
 314 .tool-card-subheader {
 315     margin-bottom: 10px;
 316     text-align: left;
 317 }
 318
 319 .tool-card-header .tool-card-icon {
 320     width: 35px;
 321     height: 35px;
 322 }
 323
 324 .tool-card-header .name {
 325     margin-bottom: 0;
 326     white-space: nowrap;
 327 }
 328
 329 .tool-card-header .tool-card-actions {
 330     float: right;
 331 }
 332
 333 .tool-card-header .tool-card-actions img {
 334     width: 15px;
 335     height: 15px;
 336     margin-left: 7px;
 337 }
 338
 339 .tool-card-body {
 340     border-top: 1px solid #e5e5e5;
 341     box-sizing: border-box;
 342     padding: 5px;
 343     height: 125px;
 344 }
 345
 346 .tool-card-body .description {
 347     max-height: 100px;
 348     word-wrap: break-word;
 349 }
 350
 351 .tool-card-footer {
 352     height: 50px;
 353     text-align: center;
 354     padding-top: 10px;
 355     box-sizing: border-box;
 356 }
 357
 358 .tool-card .contenteditable-container {
 359     position: relative;
 360 }
 361
 362 .tool-card [contenteditable=true] {
 363     border: 1px solid transparent;
 364     padding: 0.25em;
 365     position: relative;
 366     z-index: 1;
 367     overflow: auto;
 368 }
 369
 370 .tool-card [contenteditable=true]:hover {
 371     border-radius: 4px;
 372     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 373     background-color: #fff;
 374     border: 1px solid #e3e3e3;
 375     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
 376     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
 377     -o-transition: border linear 0.2s, box-shadow linear 0.2s;
 378     transition: border linear 0.2s, box-shadow linear 0.2s;
 379     cursor: text;
 380 }
 381
 382 .tool-card [contenteditable=true]:focus {
 383     outline: 0;
 384     border-radius: 4px;
 385     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
 386     background-color: #fff;
 387     border: 1px solid rgba(82, 168, 236, 0.8);
 388     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
 389     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
 390     -o-transition: border linear 0.2s, box-shadow linear 0.2s;
 391     transition: border linear 0.2s, box-shadow linear 0.2s;
 392     cursor: text;
 393 }
 394
 395 .tool-card [contenteditable=true].loading + .overlay-container {
 396     border-radius: 4px;
 397     display: block;
 398 }
 399
 400 .tool-card [contenteditable=true] + .overlay-container .loader {
 401     display: inline-block;
 402     vertical-align: middle;
 403 }
 404
 405 /* Styling for LTI view */
 406 #contentframe {
 407     border: 1px solid #ddd;
 408     border-radius: 4px;
 409 }