question/type/ddimageortext/styles.css

   1 .que.ddimageortext .qtext {
   2     margin-bottom: 0.5em;
   3     display: block;
   4 }
   5
   6 .que.ddimageortext div.ddarea,
   7 form.mform fieldset#id_previewareaheader div.ddarea {
   8     text-align: center;
   9 }
  10
  11 .que.ddimageortext div.droparea,
  12 form.mform fieldset#id_previewareaheader div.ddarea {
  13     position: relative;
  14 }
  15
  16 .que.ddimageortext div.droparea {
  17     display: inline-block;
  18 }
  19
  20 .que.ddimageortext div.droparea .draghome {
  21     position: absolute;
  22     cursor: move;
  23     white-space: nowrap;
  24 }
  25
  26 .que.ddimageortext div.droparea .dropzones {
  27     position: absolute;
  28     top: 0;
  29     left: 0;
  30 }
  31
  32 .que.ddimageortext .dropbackground,
  33 form.mform fieldset#id_previewareaheader .dropbackground {
  34     border: 1px solid #000;
  35     margin: 0 auto;
  36 }
  37
  38 form.mform fieldset#id_previewareaheader .dropbackground {
  39     max-width: none;
  40 }
  41
  42 .que.ddimageortext .dropbackground.img-responsive.img-fluid {
  43     width: 100%;
  44 }
  45
  46 .que.ddimageortext .dropzone {
  47     display: none;
  48     position: absolute;
  49     opacity: 0.5;
  50     border: 1px solid black;
  51 }
  52
  53 .que.ddimageortext .dropzone.active {
  54     display: block;
  55 }
  56
  57 .que.ddimageortext .dropzone:focus,
  58 .que.ddimageortext .droparea .draghome:focus,
  59 .que.ddimageortext .dropzone.valid-drag-over-drop,
  60 .que.ddimageortext .draghome.placed.valid-drag-over-drop {
  61     border-color: #0a0;
  62     box-shadow: 0 0 5px 5px rgba(255, 255, 150, 1);
  63     outline: 0;
  64 }
  65
  66 .que.ddimageortext .draghome,
  67 .que.ddimageortext .drag,
  68 form.mform fieldset#id_previewareaheader .droppreview {
  69     border: 1px solid black;
  70     display: inline-block;
  71     font: 13px/1.231 arial, helvetica, clean, sans-serif;
  72 }
  73
  74 .que.ddimageortext .draghomes .draghome {
  75     vertical-align: top;
  76     margin: 5px;
  77     height: auto;
  78     width: auto;
  79     cursor: move;
  80 }
  81
  82 .que.ddimageortext .draghomes.readonly .draghome,
  83 .que.ddimageortext .droparea.readonly .draghome {
  84     cursor: auto;
  85 }
  86
  87 .que.ddimageortext .draghomes .draghome.dragplaceholder {
  88     display: none;
  89 }
  90
  91 .que.ddimageortext .draghomes .draghome.dragplaceholder.active {
  92     visibility: hidden;
  93     display: inline-block;
  94 }
  95
  96 .que.ddimageortext .dragitems,
  97 form.mform fieldset#id_previewareaheader .dragitems {
  98     height: 0;
  99 }
 100
 101 .que.ddimageortext .drag,
 102 form.mform fieldset#id_previewareaheader .droppreview {
 103     position: absolute;
 104     cursor: move;
 105 }
 106
 107 .que.ddimageortext .dragitems.readonly .drag {
 108     cursor: auto;
 109 }
 110
 111 form.mform fieldset#id_previewareaheader .drag.beingdragged,
 112 .que.ddimageortext .drag.beingdragged,
 113 .que.ddimageortext .draghomes .draghome.beingdragged,
 114 .que.ddimageortext .droparea .draghome.beingdragged {
 115     box-shadow: 3px 3px 4px #000;
 116 }
 117
 118 .que.ddimageortext .draghomes .draghome.beingdragged,
 119 .que.ddimageortext .droparea .draghome.beingdragged {
 120     position: absolute;
 121 }
 122
 123 .que.ddimageortext .group1,
 124 form.mform fieldset#id_previewareaheader .group1 {
 125     background-color: #fff;
 126 }
 127
 128 .que.ddimageortext .group2,
 129 form.mform fieldset#id_previewareaheader .group2 {
 130     background-color: #b0c4de;
 131     border-radius: 10px 0 0 0;
 132 }
 133
 134 .que.ddimageortext .group3,
 135 form.mform fieldset#id_previewareaheader .group3 {
 136     background-color: #dcdcdc;
 137     border-radius: 0 10px 0 0;
 138 }
 139
 140 .que.ddimageortext .group4,
 141 form.mform fieldset#id_previewareaheader .group4 {
 142     background-color: #d8bfd8;
 143     border-radius: 0 0 10px 0;
 144 }
 145
 146 .que.ddimageortext .group5,
 147 form.mform fieldset#id_previewareaheader .group5 {
 148     background-color: #87cefa;
 149     border-radius: 0 0 0 10px;
 150 }
 151
 152 .que.ddimageortext .group6,
 153 form.mform fieldset#id_previewareaheader .group6 {
 154     background-color: #daa520;
 155     border-radius: 0 10px 10px 0;
 156 }
 157
 158 .que.ddimageortext .group7,
 159 form.mform fieldset#id_previewareaheader .group7 {
 160     background-color: #ffd700;
 161     border-radius: 10px 0 0 10px;
 162 }
 163
 164 .que.ddimageortext .group8,
 165 form.mform fieldset#id_previewareaheader .group8 {
 166     background-color: #f0e68c;
 167     border-radius: 10px 10px 10px 10px;
 168 }
 169
 170 /* Editing form. Style repeated elements*/
 171 /*Top*/
 172 body#page-question-type-ddimageortext div[id^=fgroup_id_][id*=drags_] {
 173     background: #eee;
 174     margin-top: 0;
 175     margin-bottom: 0;
 176     padding-bottom: 5px;
 177     padding-top: 5px;
 178     border: 1px solid #bbb;
 179     border-bottom: 0;
 180 }
 181
 182 body#page-question-type-ddimageortext div[id^=fgroup_id_][id*=drags_] .fgrouplabel label {
 183     font-weight: bold;
 184 }
 185 /* Middle */
 186 body#page-question-type-ddimageortext div[id^=fitem_id_][id*=dragitem_] {
 187     background: #eee;
 188     margin-bottom: 0;
 189     margin-top: 0;
 190     padding-bottom: 5px;
 191     padding-top: 5px;
 192     border: 1px solid #bbb;
 193     border-top: 0;
 194     border-bottom: 0;
 195 }
 196 /* Bottom */
 197 body#page-question-type-ddimageortext div[id^=fitem_id_][id*=draglabel_] {
 198     background: #eee;
 199     margin-bottom: 2em;
 200     margin-top: 0;
 201     padding-bottom: 5px;
 202     padding-top: 5px;
 203     border: 1px solid #bbb;
 204     border-top: 0;
 205 }