theme/bootstrapbase/less/moodle/question.less

   1 /* Question */
   2 .questionbank h2 {
   3     margin-top: 0;
   4 }
   5 .questioncategories h3 {
   6     margin-top: 0;
   7 }
   8 #chooseqtypebox {
   9     margin-top: 1em;
  10 }
  11 #chooseqtype h3 {
  12     margin: 0 0 0.3em;
  13 }
  14 #chooseqtype .instruction {
  15     display: none;
  16 }
  17 #chooseqtype .fakeqtypes {
  18     border-top: 1px solid silver;
  19 }
  20 #chooseqtype .qtypeoption {
  21     margin-bottom: 0.5em;
  22 }
  23 #chooseqtype label {
  24     display: block;
  25 }
  26 #chooseqtype .qtypename img {
  27     padding: 0 0.3em;
  28 }
  29 #chooseqtype .qtypename {
  30     display: inline-table;
  31     width: 16em;
  32 }
  33 #chooseqtype .qtypesummary {
  34     display: block;
  35     margin: 0 2em;
  36 }
  37 #chooseqtype .submitbuttons {
  38     margin: 0.7em 0;
  39     text-align: center;
  40 }
  41 #qtypechoicecontainer {
  42     display: none;
  43 }
  44 #qtypechoicecontainer_c.yui-panel-container.shadow .underlay {
  45     background: none;
  46 }
  47 #qtypechoicecontainer.yui-panel .hd {
  48     color: #333;
  49     letter-spacing: 1px;
  50     text-shadow: 1px 1px 1px #fff;
  51     .border-top-radius(10px);
  52     border: 1px solid #ccc;
  53     border-bottom: 1px solid #bbb;
  54     #gradient > .vertical(#fff, #ccc);
  55 }
  56 #qtypechoicecontainer {
  57     font-size: 12px;
  58     color: #333;
  59     background: #f2f2f2;
  60     .border-radius(10px);
  61     border: 1px solid #ccc;
  62     border-top: 0 none;
  63     .box-shadow(5px 5px 20px 0 #666);
  64 }
  65 #qtypechoicecontainer #chooseqtype {
  66     width: 40em;
  67 }
  68 #chooseqtypehead h3 {
  69     margin: 0;
  70     font-weight: normal;
  71 }
  72 #chooseqtype .qtypes {
  73     position: relative;
  74     border-bottom: 1px solid #bbb;
  75     padding: 0.24em 0;
  76 }
  77
  78 // TODO: MDL-55142 remove browser these brwoser hacks:
  79 /* stylelint-disable declaration-block-no-duplicate-properties */
  80 #chooseqtype .alloptions {
  81     overflow-x: hidden;
  82     overflow-y: auto;
  83     max-height: 400px;
  84     max-height: calc(100vh - 15em);
  85     /* The next line is a workaround because recess is crap. Delete ththe following line once
  86     * https://github.com/twitter/recess/issues/59 / https://github.com/twitter/recess/issues/75
  87     * is fixed. The previous line is the right one. */
  88     max-height: 60vh;
  89     width: 60%;
  90 }
  91 /* stylelint-enable */
  92
  93 #chooseqtype .qtypeoption {
  94     margin-bottom: 0;
  95     padding: 0.3em 0.3em 0.3em 1.6em;
  96 }
  97 #chooseqtype .qtypeoption img {
  98     vertical-align: text-bottom;
  99     padding-left: 1em;
 100     padding-right: 0.5em;
 101 }
 102 #chooseqtype .selected {
 103     background-color: #fff;
 104     .box-shadow(0px 0 10px 0 #ccc);
 105 }
 106 #chooseqtype .instruction,
 107 #chooseqtype .qtypesummary {
 108     display: none;
 109     position: absolute;
 110     top: 0;
 111     right: 0;
 112     bottom: 0;
 113     left: 60%;
 114     margin: 0;
 115     overflow-x: hidden;
 116     overflow-y: auto;
 117     padding: 1.5em 1.6em;
 118     background-color: #fff;
 119 }
 120 #chooseqtype .instruction,
 121 #chooseqtype .selected .qtypesummary {
 122     display: block;
 123 }
 124 #categoryquestions {
 125     margin: 0;
 126     td,
 127     th {
 128         padding: 0 0.2em;
 129     }
 130     th {
 131         text-align: left;
 132         font-weight: normal;
 133     }
 134     .checkbox {
 135         padding-left: 5px;
 136     }
 137     .checkbox input[type="checkbox"] {
 138         margin-left: 0;
 139         float: none;
 140     }
 141     img.iconsmall {
 142         padding: 0;
 143     }
 144     .iconcol {
 145         padding: 3px;
 146     }
 147     label {
 148         margin: 0;
 149     }
 150     .header {
 151         text-align: left;
 152     }
 153 }
 154 #page-mod-quiz-edit {
 155     div.questionbankwindow div.header {
 156         margin: 0;
 157     }
 158     div.questionbankwindow.block {
 159         padding: 0;
 160     }
 161 }
 162 .questionbank .singleselect {
 163     margin: 0;
 164 }
 165 /* Question editing form */
 166 #combinedfeedbackhdr div.fhtmleditor {
 167     padding: 0;
 168 }
 169 #combinedfeedbackhdr div.fcheckbox {
 170     margin-bottom: 1em;
 171 }
 172 #multitriesheader div.fitem_feditor {
 173     margin-top: 1em;
 174 }
 175 #multitriesheader div.fitem_fgroup {
 176     margin-bottom: 1em;
 177 }
 178 #multitriesheader div.fitem_fgroup fieldset.felement label {
 179     margin-left: 0.3em;
 180     margin-right: 0.3em;
 181 }
 182 body.path-question-type .fitem_fgroup .accesshide {
 183     /* Hack to display the labels within a form group. */
 184     font: inherit;
 185     position: static;
 186     padding-right: .3em;
 187 }
 188 .que {
 189     clear: left;
 190     text-align: left;
 191     margin: 0 auto 1.8em auto;
 192 }
 193 .que .info {
 194     float: left;
 195     width: 7em;
 196     padding: 0.5em;
 197     margin-bottom: 1.8em;
 198     background-color: @grayLighter;
 199     border: 1px solid darken(spin(@grayLighter, -10), 7%);
 200     .border-radius(2px);
 201 }
 202 .que h3.no {
 203     margin: 0;
 204     font-size: 0.8em;
 205     line-height: 1;
 206 }
 207 .que span.qno {
 208     font-size: 1.5em;
 209     font-weight: bold;
 210 }
 211 .que .info > div {
 212     font-size: 0.8em;
 213     margin-top: 0.7em;
 214 }
 215 .que .info .questionflag.editable {
 216     cursor: pointer;
 217 }
 218 .que .info .editquestion img,
 219 .que .info .questionflag img,
 220 .que .info .questionflag input {
 221     vertical-align: bottom;
 222 }
 223 .que .content {
 224     margin: 0 0 0 8.5em;
 225 }
 226 .que .formulation,
 227 .que .outcome,
 228 .que .comment {
 229     .alert
 230 }
 231 .que .formulation {
 232     .alert-info;
 233     color: @textColor;
 234 }
 235 .formulation input[type="text"],
 236 .formulation select {
 237     width: auto;
 238     vertical-align: baseline;
 239 }
 240 .que.multianswer .formulation .yui3-widget-positioned .feedbackspan {
 241     box-sizing: content-box;
 242     padding-bottom: 0;
 243     max-width: inherit;
 244     width: inherit;
 245 }
 246 .path-mod-quiz input[size] {
 247     width: auto;
 248 }
 249
 250 .que .comment {
 251     .alert-success;
 252 }
 253 .que .history {
 254     .well
 255 }
 256 .que .ablock {
 257     margin: 0.7em 0 0.3em 0;
 258 }
 259 .que .im-controls {
 260     margin-top: 0.5em;
 261     text-align: left;
 262 }
 263 .que .specificfeedback,
 264 .que .generalfeedback,
 265 .que .rightanswer,
 266 .que .im-feedback,
 267 .que .feedback,
 268 .que p {
 269     margin: 0 0 0.5em;
 270 }
 271 .que .qtext {
 272     margin-bottom: 1.5em;
 273 }
 274 .que .correctness {
 275     .label;
 276     &.correct {
 277         background-color: @successText;
 278     }
 279     &.partiallycorrect {
 280         background-color: @orange;
 281     }
 282     &.notanswered,
 283     &.incorrect {
 284         background-color: @errorText;
 285     }
 286 }
 287 .que .validationerror {
 288     color: @errorText;
 289 }
 290 // copied from .formFieldState in mixin.less
 291 // and made more specific
 292 .answerState(@textColor, @backgroundColor) {
 293     @borderColor: @textColor;
 294     color: @textColor;
 295     background-color: @backgroundColor;
 296     border-color: @borderColor;
 297     .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
 298     &:focus {
 299         border-color: darken(@borderColor, 10%);
 300         @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@borderColor, 20%);
 301         .box-shadow(@shadow);
 302     }
 303 }
 304
 305 .formulation .correct {
 306     background-color: @successBackground;
 307 }
 308 .formulation .partiallycorrect {
 309     background-color: @warningBackground;
 310 }
 311 .formulation .incorrect {
 312     background-color: @errorBackground;
 313 }
 314 .formulation select.correct,
 315 .formulation input.correct {
 316     .answerState(@successText, @successBackground);
 317 }
 318 .formulation select.partiallycorrect,
 319 .formulation input.partiallycorrect {
 320     .answerState(@warningText, @warningBackground);
 321 }
 322 .formulation select.incorrect,
 323 .formulation input.incorrect {
 324     .answerState(@errorText, @errorBackground);
 325 }
 326
 327 .que .grading,
 328 .que .comment,
 329 .que .commentlink,
 330 .que .history {
 331     margin-top: 0.5em;
 332 }
 333 .que .history h3 {
 334     margin: 0 0 0.2em;
 335     font-size: 1em;
 336 }
 337 .que .history table {
 338     width: 100%;
 339     margin: 0;
 340 }
 341 .que .history .current {
 342     font-weight: bold;
 343 }
 344 .que .questioncorrectnessicon {
 345     vertical-align: text-bottom;
 346 }
 347 .que input.questionflagimage {
 348     padding-right: 3px;
 349 }
 350 .importerror {
 351     margin-top: 10px;
 352     border-bottom: 1px solid #555;
 353 }
 354 .mform .que.comment .fitemtitle {
 355     width: 20%;
 356 }
 357 #page-question-preview #techinfo {
 358     margin: 1em 0;
 359 }
 360
 361 // imported from quiz.css
 362
 363 #page-mod-quiz-edit .box.generalbox.questionbank {
 364     padding: 0.5em;
 365 }
 366
 367 #page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
 368 #page-mod-quiz-edit .questionbank .categoryquestionscontainer,
 369 #page-mod-quiz-edit .questionbank .choosecategory {
 370     padding: 0;
 371 }
 372
 373 #page-mod-quiz-edit .questionbank .choosecategory select {
 374     width: 100%;
 375 }
 376
 377 #page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
 378     background: transparent;
 379 }
 380 #page-mod-quiz-edit #categoryquestions > thead {
 381     background: #fff;
 382 }
 383 #page-mod-quiz-edit #categoryquestions > tbody > tr:nth-of-type(even) {
 384     background: #e4e4e4;
 385 }
 386
 387 #page-mod-quiz-edit .questionbankwindow div.header {
 388     color: #444;
 389     text-shadow: none;
 390     .border-top-radius(4px);
 391     margin: 0 -10px 0 -10px;
 392     padding: 2px 10px 2px 10px;
 393     background: transparent; /* Old browsers */
 394 }
 395
 396 #page-mod-quiz-edit .questionbankwindow div.header a:link,
 397 #page-mod-quiz-edit .questionbankwindow div.header a:visited {
 398     color: @linkColor;
 399 }
 400
 401 #page-mod-quiz-edit .questionbankwindow div.header a:hover {
 402     color: @linkColorHover;
 403 }
 404
 405 #page-mod-quiz-edit .createnewquestion {
 406     padding: 0.3em 0;
 407     div,
 408     input {
 409         margin: 0;
 410     }
 411 }
 412
 413 #page-mod-quiz-edit .questionbankwindow div.header .title {
 414     color: @textColor;
 415 }
 416
 417 #page-mod-quiz-edit div.container div.generalbox {
 418     background-color: transparent;
 419     padding: 1.5em;
 420 }
 421
 422 #page-mod-quiz-edit .categoryinfo {
 423     background-color: transparent;
 424     border-bottom: none;
 425 }
 426
 427 #page-mod-quiz-edit .createnewquestion .singlebutton input {
 428     margin-bottom: 0;
 429 }
 430
 431 #page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
 432 #page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
 433     padding: 0 0 1.5em 0;
 434 }
 435
 436 #page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
 437     background-color: transparent;
 438     margin: 0;
 439     border-top: 0;
 440     border-bottom: 0;
 441     .paging {
 442         padding: 0 0.3em;
 443     }
 444 }
 445
 446 #page-mod-quiz-edit div.question div.content div.questioncontrols {
 447     background-color: @bodyBackground;
 448 }
 449 #page-mod-quiz-edit div.question div.content div.points {
 450     margin-top: -0.5em;
 451     padding-bottom: 0;
 452     border: none;
 453     background-color: @bodyBackground;
 454     position: static;
 455     width: 12.1em;
 456     float: right;
 457     margin-right: 60px;
 458 }
 459 #page-mod-quiz-edit div.question div.content div.points br {
 460     display: none;
 461 }
 462 #page-mod-quiz-edit div.question div.content div.points label {
 463     display: inline-block;
 464 }
 465
 466 #page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
 467     background-color: @bodyBackground;
 468 }
 469
 470 #page-mod-quiz-edit .quizpagedelete,
 471 #page-mod-quiz-edit .quizpagedelete img {
 472     background-color: transparent;
 473 }
 474
 475 #page-mod-quiz-edit div.quizpage .pagecontent {
 476     border: 1px solid #ddd;
 477     .border-radius(2px);
 478     overflow: hidden;
 479 }
 480
 481 #page-mod-quiz-edit div.questionbank .categoryinfo {
 482     padding: 0.3em 0;
 483 }
 484
 485 #page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
 486     padding: 0;
 487     strong {
 488         display: block;
 489     }
 490     hr,
 491     br {
 492         display: none;
 493     }
 494     strong {
 495         margin-left: -0.3em;
 496     }
 497     strong label {
 498         margin-left: 0.3em;
 499     }
 500     input {
 501         margin-left: 0;
 502     }
 503     input + input {
 504         margin-left: 5px;
 505     }
 506 }
 507
 508 .questionbankwindow .module {
 509     width: auto;
 510 }
 511
 512 #page-mod-quiz-edit div.editq div.question div.content {
 513     background-color: @bodyBackground;
 514     border: 1px solid #ddd;
 515     .border-radius(2px);
 516     overflow: hidden;
 517 }
 518
 519 .path-mod-quiz .statedetails {
 520     display: block;
 521     font-size: 0.9em;
 522 }
 523
 524 a#hidebankcmd {
 525     color: @linkColor;
 526 }
 527
 528 // override question plugins
 529
 530 // qtype_shortanswer
 531
 532 .que.shortanswer .answer {
 533     padding: 0;
 534 }
 535
 536 .que label {
 537     display: inline;
 538 }
 539
 540 body.path-question-type .mform fieldset.hidden {
 541     padding: 0;
 542     margin: 0.7em 0 0;
 543 }
 544
 545 .tag-condition-container {
 546     position: relative;
 547 }