Merge branch 'MDL-70248-310' of https://github.com/HuongNV13/moodle into MOODLE_310_S...
[moodle.git] / question / type / ddmarker / styles.css
CommitLineData
b3878dbd
JP
1.que.ddmarker .qtext {
2 margin-bottom: 0.5em;
3 display: block;
4}
5
d2fa9e79
HN
6.que.ddmarker .droparea {
7 display: inline-block;
8 position: relative;
9}
10
11.que.ddmarker .droparea .dropzones,
12.que.ddmarker .droparea .markertexts {
13 position: absolute;
14 top: 0;
15 left: 0;
b3878dbd
JP
16}
17
d2fa9e79
HN
18.que.ddmarker .draghomes .marker,
19.que.ddmarker .droparea .marker {
20 vertical-align: top;
b3878dbd 21 cursor: move;
d2fa9e79
HN
22}
23
24.que.ddmarker .draghomes.readonly .marker,
25.que.ddmarker .droparea.readonly .marker {
26 cursor: auto;
27}
28
29.que.ddmarker .droparea .marker {
b1330fe8 30 position: absolute;
b3878dbd 31}
bc33e9bd 32
d2fa9e79
HN
33.que.ddmarker .draghomes .marker {
34 position: relative;
ad89de38 35 display: inline-block;
7e4b796b 36 margin: 10px;
c2780488 37}
bc33e9bd 38
d2fa9e79
HN
39.que.ddmarker .draghomes .marker.dragplaceholder {
40 display: none;
d89a3485 41}
bc33e9bd 42
d2fa9e79
HN
43.que.ddmarker .draghomes .marker.dragplaceholder.active {
44 visibility: hidden;
45 display: inline-block;
b3878dbd 46}
bc33e9bd
DP
47
48.que.ddmarker div.ddarea,
49form.mform fieldset#id_previewareaheader div.ddarea {
7e4b796b 50 text-align: center;
b3878dbd 51}
bc33e9bd 52
4b8a8650
TH
53form.mform fieldset#id_previewareaheader div.ddarea .markertexts {
54 min-height: 80px;
55}
bc33e9bd
DP
56
57.que.ddmarker .dropbackground,
58form.mform fieldset#id_previewareaheader .dropbackground {
7e4b796b 59 margin: 0 auto;
ed7e30fa 60 border: 1px solid black;
d2fa9e79
HN
61}
62
63form.mform fieldset#id_previewareaheader .dropbackground {
ed7e30fa 64 max-width: none;
b3878dbd 65}
e354ce47 66
bc33e9bd
DP
67.que.ddmarker div.dragitems div.draghome,
68.que.ddmarker div.dragitems div.dragitem,
69form.mform fieldset#id_previewareaheader div.draghome,
70form.mform fieldset#id_previewareaheader div.drag {
71 font: 13px/1.231 arial, helvetica, clean, sans-serif;
b3878dbd 72}
bc33e9bd 73
d2fa9e79
HN
74.que.ddmarker .droparea .marker span.markertext,
75.que.ddmarker .draghomes .marker span.markertext,
5e0f5f52 76.que.ddmarker div.markertexts span.markertext,
26492f70 77form.mform fieldset#id_previewareaheader div.markertexts span.markertext {
2d391d1b 78 margin: 0 5px;
e47c7eae 79 z-index: 3;
ae674bd2 80 background-color: white;
374c250b 81 border: 2px solid black;
ae674bd2 82 padding: 5px;
7e4b796b 83 display: inline-block;
64b3d6e8 84 zoom: 1;
b34bc997 85 border-radius: 10px;
5d4b3421 86 color: black;
ed7e30fa 87 opacity: 0.6;
e354ce47 88}
bc33e9bd 89
d2fa9e79
HN
90.que.ddmarker .droparea .marker span.markertext,
91.que.ddmarker .draghomes .marker span.markertext {
92 white-space: nowrap;
93}
94
5e0f5f52 95.que.ddmarker div.markertexts span.markertext {
e47c7eae
JP
96 z-index: 2;
97 background-color: yellow;
ed7e30fa
TH
98 border: 2px solid khaki;
99 position: absolute;
d2fa9e79 100 white-space: nowrap;
e47c7eae 101}
bc33e9bd 102
f76c454b 103.que.ddmarker span.wrongpart {
e47c7eae 104 background-color: yellow;
ed7e30fa 105 border: 2px solid khaki;
e47c7eae 106 padding: 5px;
e47c7eae 107 border-radius: 10px;
e47c7eae
JP
108 opacity: 0.6;
109 margin: 5px;
7e4b796b 110 display: inline-block;
e47c7eae 111}
bc33e9bd 112
d2fa9e79
HN
113.que.ddmarker .droparea .marker img.target,
114.que.ddmarker .draghomes .marker img.target {
7e4b796b 115 position: absolute;
2d391d1b
TH
116 left: -7px; /* This must be half the size of the target image, minus 0.5. */
117 top: -7px; /* In other words, this works for a 15x15 cross-hair. */
3865a588 118}
bc33e9bd 119
3865a588 120.que.ddmarker div.dragitems div.draghome img.target {
7e4b796b 121 display: none;
3865a588 122}
bc33e9bd 123
d2fa9e79
HN
124.que.ddmarker .marker.beingdragged {
125 position: absolute;
126}
127
128.que.ddmarker .marker.beingdragged span.markertext {
44e47bd9 129 z-index: 3;
44e47bd9 130 box-shadow: 3px 3px 4px #000;
a709dca5 131}
bc33e9bd 132
ed7e30fa
TH
133/* Styles for the preview on the editing form. */
134.que.ddmarker .dropzone .shape {
135 fill: #fff;
136 fill-opacity: 0.5;
137 stroke: black;
138 stroke-width: 1;
139}
140.que.ddmarker .dropzone.active .shape {
141 stroke-width: 2;
142}
143.que.ddmarker .dropzone.color0 .shape {
144 fill: #fff;
145}
146.que.ddmarker .dropzone.color1 .shape {
147 fill: #b0c4de;
148}
149.que.ddmarker .dropzone.color2 .shape {
150 fill: #dcdcdc;
151}
152.que.ddmarker .dropzone.color3 .shape {
153 fill: #d8bfd8;
154}
155.que.ddmarker .dropzone.color4 .shape {
156 fill: #87cefa;
157}
158.que.ddmarker .dropzone.color5 .shape {
159 fill: #daa520;
160}
161.que.ddmarker .dropzone.color6 .shape {
162 fill: #ffd700;
163}
164.que.ddmarker .dropzone.color7 .shape {
165 fill: #f0e68c;
166}
167
168.que.ddmarker .dropzone .shapeLabel {
169 text-anchor: middle;
170}
171
172.que.ddmarker .dropzone .handle {
173 fill: #fff;
174 fill-opacity: 0.1; /* Need a small amount of opacity of the handle can't be grabbed. */
175 stroke-width: 1;
176 display: none;
177 cursor: move;
178}
179.que.ddmarker .dropzone .handle.move {
180 stroke: #800;
181}
182.que.ddmarker .dropzone .handle.edit {
183 stroke: #008;
184}
185.que.ddmarker .dropzone.active .handle {
8951e8b9 186 display: inherit;
ed7e30fa
TH
187}
188
80f02993
CC
189/* Editing form. Style repeated elements*/
190/*Top*/
191body#page-question-type-ddmarker div[id^=fitem_id_][id*=hint_] {
bc33e9bd 192 background: #eee;
80f02993
CC
193 margin-top: 0;
194 margin-bottom: 0;
195 padding-bottom: 5px;
196 padding-top: 5px;
bc33e9bd 197 border: 1px solid #bbb;
80f02993
CC
198 border-bottom: 0;
199}
bc33e9bd 200
80f02993
CC
201body#page-question-type-ddmarker div[id^=fitem_id_][id*=hint_] .fitemtitle {
202 font-weight: bold;
203}
204/* Middle */
205body#page-question-type-ddmarker div[id^=fitem_id_][id*=hintoptions_],
206body#page-question-type-ddmarker div[id^=fitem_id_][id*=hintshownumcorrect_] {
bc33e9bd 207 background: #eee;
80f02993
CC
208 margin-bottom: 0;
209 margin-top: 0;
210 padding-bottom: 5px;
211 padding-top: 5px;
bc33e9bd 212 border: 1px solid #bbb;
80f02993
CC
213 border-top: 0;
214 border-bottom: 0;
215}
216/* Bottom */
217body#page-question-type-ddmarker div[id^=fitem_id_][id*=hintclearwrong_] {
bc33e9bd 218 background: #eee;
80f02993
CC
219 margin-bottom: 2em;
220 margin-top: 0;
221 padding-bottom: 5px;
222 padding-top: 5px;
bc33e9bd 223 border: 1px solid #bbb;
80f02993
CC
224 border-top: 0;
225}
bc33e9bd 226
80f02993
CC
227body#page-question-type-ddmarker #fitem_id_penalty {
228 margin-bottom: 2em;
229}
d2fa9e79
HN
230
231body#page-question-type-ddmarker .ddarea.que.ddmarker {
232 overflow-y: scroll;
233}