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