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