[Summary view] [Print] [Text view]

   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, no-browser-hacks */
  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      overflow-y: auto;
 120  }
 121  #chooseqtype .instruction,
 122  #chooseqtype .selected .qtypesummary {
 123      display: block;
 124  }
 125  #categoryquestions {
 126      margin: 0;
 127      td,
 128      th {
 129          padding: 0 0.2em;
 130      }
 131      th {
 132          text-align: left;
 133          font-weight: normal;
 134      }
 135      .checkbox {
 136          padding-left: 5px;
 137      }
 138      .checkbox input[type="checkbox"] {
 139          margin-left: 0px;
 140          float: none;
 141      }
 142      img.iconsmall {
 143          padding: 0;
 144      }
 145      .iconcol {
 146          padding: 3px;
 147      }
 148      label {
 149          margin: 0;
 150      }
 151  }
 152  #page-mod-quiz-edit {
 153      div.questionbankwindow div.header {
 154          margin: 0;
 155      }
 156      div.questionbankwindow.block {
 157          padding: 0;
 158      }
 159  }
 160  .dir-rtl #categoryquestions th {
 161      text-align: right;
 162  }
 163  .questionbank .singleselect {
 164      margin: 0;
 165  }
 166  /* Question editing form */
 167  #combinedfeedbackhdr div.fhtmleditor {
 168      padding: 0;
 169  }
 170  #combinedfeedbackhdr div.fcheckbox {
 171      margin-bottom: 1em;
 172  }
 173  #multitriesheader div.fitem_feditor {
 174      margin-top: 1em;
 175  }
 176  #multitriesheader div.fitem_fgroup {
 177      margin-bottom: 1em;
 178  }
 179  #multitriesheader div.fitem_fgroup fieldset.felement label {
 180      margin-left: 0.3em;
 181      margin-right: 0.3em;
 182  }
 183  body.path-question-type .fitem_fgroup .accesshide {
 184      font: inherit;
 185      left: 0;
 186      position: static;
 187      padding-right: .3em;
 188  }
 189  .que {
 190      clear: left;
 191      text-align: left;
 192      margin: 0 auto 1.8em auto;
 193  }
 194  .dir-rtl .que {
 195      text-align: right;
 196  }
 197  .que .info {
 198      float: left;
 199      width: 7em;
 200      padding: 0.5em;
 201      margin-bottom: 1.8em;
 202      background-color: @grayLighter;
 203      border: 1px solid darken(spin(@grayLighter, -10), 7%);
 204      .border-radius(2px);
 205  }
 206  .que h3.no {
 207      margin: 0;
 208      font-size: 0.8em;
 209      line-height: 1;
 210  }
 211  .que span.qno {
 212      font-size: 1.5em;
 213      font-weight: bold;
 214  }
 215  .que .info > div {
 216      font-size: 0.8em;
 217      margin-top: 0.7em;
 218  }
 219  .que .info .questionflag.editable {
 220      cursor: pointer;
 221  }
 222  .que .info .editquestion img,
 223  .que .info .questionflag img,
 224  .que .info .questionflag input {
 225      vertical-align: bottom;
 226  }
 227  .que .content {
 228      margin: 0 0 0 8.5em;
 229  }
 230  .que .formulation,
 231  .que .outcome,
 232  .que .comment {
 233      .alert
 234  }
 235  .que .formulation {
 236      .alert-info;
 237      color: @textColor;
 238  }
 239  .formulation input[type="text"],
 240  .formulation select {
 241      width: auto;
 242      vertical-align: baseline;
 243  }
 244  .path-mod-quiz input[size] {
 245      width: auto;
 246  }
 247  
 248  .que .comment {
 249      .alert-success;
 250  }
 251  .que .history {
 252      .well
 253  }
 254  .que .ablock {
 255      margin: 0.7em 0 0.3em 0;
 256  }
 257  .que .im-controls {
 258      margin-top: 0.5em;
 259      text-align: left;
 260  }
 261  .dir-rtl .que .im-controls {
 262      text-align: right;
 263  }
 264  .que .specificfeedback,
 265  .que .generalfeedback,
 266  .que .rightanswer,
 267  .que .im-feedback,
 268  .que .feedback,
 269  .que p {
 270      margin: 0 0 0.5em;
 271  }
 272  .que .qtext {
 273      margin-bottom: 1.5em;
 274  }
 275  .que .correctness {
 276      .label;
 277      &.correct {
 278          background-color: @successText;
 279      }
 280      &.partiallycorrect {
 281          background-color: @orange;
 282      }
 283      &.notanswered,
 284      &.incorrect {
 285          background-color: @errorText;
 286      }
 287  }
 288  .que .validationerror {
 289      color: @errorText;
 290  }
 291  // copied from .formFieldState in mixin.less
 292  // and made more specific
 293  .answerState(@textColor, @backgroundColor) {
 294      @borderColor: @textColor;
 295      color: @textColor;
 296      background-color: @backgroundColor;
 297      border-color: @borderColor;
 298      .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
 299      &:focus {
 300          border-color: darken(@borderColor, 10%);
 301          @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@borderColor, 20%);
 302          .box-shadow(@shadow);
 303      }
 304  }
 305  
 306  .formulation .correct {
 307      background-color: @successBackground;
 308  }
 309  .formulation .partiallycorrect {
 310      background-color: @warningBackground;
 311  }
 312  .formulation .incorrect {
 313      background-color: @errorBackground;
 314  }
 315  .formulation select.correct,
 316  .formulation input.correct {
 317      .answerState(@successText, @successBackground);
 318  }
 319  .formulation select.partiallycorrect,
 320  .formulation input.partiallycorrect {
 321      .answerState(@warningText, @warningBackground);
 322  }
 323  .formulation select.incorrect,
 324  .formulation input.incorrect {
 325      .answerState(@errorText, @errorBackground);
 326  }
 327  
 328  .que .grading,
 329  .que .comment,
 330  .que .commentlink,
 331  .que .history {
 332      margin-top: 0.5em;
 333  }
 334  .que .history h3 {
 335      margin: 0 0 0.2em;
 336      font-size: 1em;
 337  }
 338  .que .history table {
 339      width: 100%;
 340      margin: 0;
 341  }
 342  .que .history .current {
 343      font-weight: bold;
 344  }
 345  .que .questioncorrectnessicon {
 346      vertical-align: text-bottom;
 347  }
 348  .que input.questionflagimage {
 349      padding-right: 3px;
 350  }
 351  .dir-rtl .que input.questionflagimage {
 352      padding-left: 3px;
 353      padding-right: 0;
 354  }
 355  .importerror {
 356      margin-top: 10px;
 357      border-bottom: 1px solid #555;
 358  }
 359  .mform .que.comment .fitemtitle {
 360      width: 20%;
 361  }
 362  #page-question-preview #techinfo {
 363      margin: 1em 0;
 364  }
 365  /** Overide for RTL layout **/
 366  .dir-rtl #chooseqtype .instruction,
 367  .dir-rtl #chooseqtype .qtypesummary {
 368      right: 60%;
 369      left: 0%;
 370      border-left: 0;
 371      border-right: 1px solid grey;
 372  }
 373  
 374  // imported from quiz.css
 375  
 376  #page-mod-quiz-edit .box.generalbox.questionbank {
 377      padding: 0.5em;
 378  }
 379  
 380  #page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
 381  #page-mod-quiz-edit .questionbank .categoryquestionscontainer,
 382  #page-mod-quiz-edit .questionbank .choosecategory {
 383      padding: 0;
 384  }
 385  
 386  #page-mod-quiz-edit .questionbank .choosecategory select {
 387      width: 100%;
 388  }
 389  
 390  #page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
 391      background: transparent;
 392  }
 393  #page-mod-quiz-edit #categoryquestions > thead {
 394      background: #FFF;
 395  }
 396  #page-mod-quiz-edit #categoryquestions > tbody > tr:nth-of-type(even) {
 397      background: #e4e4e4;
 398  }
 399  
 400  #page-mod-quiz-edit .questionbankwindow div.header {
 401      color: #444;
 402      text-shadow: none;
 403      padding: 3px;
 404      .border-top-radius(4px);
 405      margin: 0 -10px 0 -10px;
 406      padding: 2px 10px 2px 10px;
 407      background: transparent; /* Old browsers */
 408  }
 409  
 410  #page-mod-quiz-edit .questionbankwindow div.header a:link,
 411  #page-mod-quiz-edit .questionbankwindow div.header a:visited {
 412      color: @linkColor;
 413  }
 414  
 415  #page-mod-quiz-edit .questionbankwindow div.header a:hover {
 416      color: @linkColorHover;
 417  }
 418  
 419  #page-mod-quiz-edit .createnewquestion {
 420      padding: 0.3em 0;
 421      div,
 422      input {
 423          margin: 0;
 424      }
 425  }
 426  
 427  #page-mod-quiz-edit .questionbankwindow div.header .title {
 428      color: @textColor;
 429  }
 430  
 431  #page-mod-quiz-edit div.container div.generalbox {
 432      background-color: transparent;
 433      padding: 1.5em;
 434  }
 435  
 436  #page-mod-quiz-edit .categoryinfo {
 437      background-color: transparent;
 438      border-bottom: none;
 439  }
 440  
 441  #page-mod-quiz-edit .createnewquestion .singlebutton input {
 442      margin-bottom: 0;
 443  }
 444  
 445  #page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
 446  #page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
 447      padding: 0 0 1.5em 0;
 448  }
 449  
 450  #page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
 451      background-color: transparent;
 452      margin: 0;
 453      border-top: 0;
 454      border-bottom: 0;
 455      .paging {
 456          padding: 0 0.3em;
 457      }
 458  }
 459  
 460  #page-mod-quiz-edit div.question div.content div.questioncontrols {
 461      background-color: @bodyBackground;
 462  }
 463  #page-mod-quiz-edit div.question div.content div.points {
 464      margin-top: -0.5em;
 465      padding-bottom: 0em;
 466      border: none;
 467      background-color: @bodyBackground;
 468      position: static;
 469      width: 12.1em;
 470      float: right;
 471      margin-right: 60px;
 472  }
 473  #page-mod-quiz-edit.dir-rtl div.question div.content div.points {
 474      float: left;
 475      margin-left: 60px;
 476      margin-right: 0px;
 477  
 478  }
 479  #page-mod-quiz-edit div.question div.content div.points br {
 480      display: none;
 481  }
 482  #page-mod-quiz-edit div.question div.content div.points label {
 483      display: inline-block;
 484  }
 485  
 486  #page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
 487      background-color: @bodyBackground;
 488  }
 489  
 490  #page-mod-quiz-edit .quizpagedelete,
 491  #page-mod-quiz-edit .quizpagedelete img {
 492      background-color: transparent;
 493  }
 494  
 495  #page-mod-quiz-edit div.quizpage .pagecontent {
 496      border: 1px solid #ddd;
 497      .border-radius(2px);
 498      overflow: hidden;
 499  }
 500  
 501  #page-mod-quiz-edit div.questionbank .categoryinfo {
 502      padding: 0.3em 0;
 503  }
 504  
 505  #page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
 506      padding: 0;
 507      strong {
 508          display: block;
 509      }
 510      hr,
 511      br {
 512          display: none;
 513      }
 514      strong {
 515          margin-left: -0.3em;
 516      }
 517      strong label {
 518          margin-left: 0.3em;
 519      }
 520      input {
 521          margin-left: 0;
 522      }
 523      input + input {
 524          margin-left: 5px;
 525      }
 526  }
 527  
 528  .questionbankwindow .module {
 529      width: auto;
 530  }
 531  
 532  #page-mod-quiz-edit div.editq div.question div.content {
 533      background-color: @bodyBackground;
 534      border: 1px solid #ddd;
 535      .border-radius(2px);
 536      overflow: hidden;
 537  }
 538  
 539  .path-mod-quiz .statedetails {
 540      display: block;
 541      font-size: 0.9em;
 542  }
 543  
 544  a#hidebankcmd {
 545      color: @linkColor;
 546  }
 547  
 548  // override question plugins
 549  
 550  // qtype_shortanswer
 551  
 552  .que.shortanswer .answer {
 553      padding: 0;
 554  }
 555  
 556  .que label {
 557      display: inline;
 558  }
 559  
 560  body.path-question-type .mform fieldset.hidden {
 561      padding: 0;
 562      margin: 0.7em 0 0;
 563  }