Merge branch 'MDL-69089-39' of git://github.com/aanabit/moodle into MOODLE_39_STABLE
[moodle.git] / question / type / ddimageortext / styles.css
1 .que.ddimageortext .qtext {
2     margin-bottom: 0.5em;
3     display: block;
4 }
6 .que.ddimageortext div.ddarea,
7 form.mform fieldset#id_previewareaheader div.ddarea {
8     text-align: center;
9 }
11 .que.ddimageortext div.droparea,
12 form.mform fieldset#id_previewareaheader div.ddarea {
13     position: relative;
14 }
16 .que.ddimageortext div.droparea {
17     display: inline-block;
18 }
20 .que.ddimageortext div.droparea .draghome {
21     position: absolute;
22     cursor: move;
23     white-space: nowrap;
24 }
26 .que.ddimageortext div.droparea .dropzones {
27     position: absolute;
28     top: 0;
29     /*rtl:ignore*/
30     left: 0;
31 }
33 .que.ddimageortext .dropbackground,
34 form.mform fieldset#id_previewareaheader .dropbackground {
35     border: 1px solid #000;
36     margin: 0 auto;
37 }
39 form.mform fieldset#id_previewareaheader .dropbackground {
40     max-width: none;
41 }
43 .que.ddimageortext .dropbackground.img-responsive.img-fluid {
44     width: 100%;
45 }
47 .que.ddimageortext .dropzone {
48     display: none;
49     position: absolute;
50     opacity: 0.5;
51     border: 1px solid black;
52 }
54 .que.ddimageortext .dropzone.active {
55     display: block;
56 }
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 }
67 .que.ddimageortext .draghome,
68 .que.ddimageortext .drag,
69 form.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 }
75 .que.ddimageortext .draghomes .draghome {
76     vertical-align: top;
77     margin: 5px;
78     height: auto;
79     width: auto;
80     cursor: move;
81 }
83 .que.ddimageortext .draghomes.readonly .draghome,
84 .que.ddimageortext .droparea.readonly .draghome {
85     cursor: auto;
86 }
88 .que.ddimageortext .draghomes .draghome.dragplaceholder {
89     display: none;
90 }
92 .que.ddimageortext .draghomes .draghome.dragplaceholder.active {
93     visibility: hidden;
94     display: inline-block;
95 }
97 .que.ddimageortext .dragitems,
98 form.mform fieldset#id_previewareaheader .dragitems {
99     height: 0;
102 .que.ddimageortext .drag,
103 form.mform fieldset#id_previewareaheader .droppreview {
104     position: absolute;
105     cursor: move;
108 .que.ddimageortext .dragitems.readonly .drag {
109     cursor: auto;
112 form.mform fieldset#id_previewareaheader .drag.beingdragged,
113 .que.ddimageortext .drag.beingdragged,
114 .que.ddimageortext .draghomes .draghome.beingdragged,
115 .que.ddimageortext .droparea .draghome.beingdragged {
116     box-shadow: 3px 3px 4px #000;
119 .que.ddimageortext .draghomes .draghome.beingdragged,
120 .que.ddimageortext .droparea .draghome.beingdragged {
121     position: absolute;
124 .que.ddimageortext .group1,
125 form.mform fieldset#id_previewareaheader .group1 {
126     background-color: #fff;
129 .que.ddimageortext .group2,
130 form.mform fieldset#id_previewareaheader .group2 {
131     background-color: #b0c4de;
132     border-radius: 10px 0 0 0;
135 .que.ddimageortext .group3,
136 form.mform fieldset#id_previewareaheader .group3 {
137     background-color: #dcdcdc;
138     border-radius: 0 10px 0 0;
141 .que.ddimageortext .group4,
142 form.mform fieldset#id_previewareaheader .group4 {
143     background-color: #d8bfd8;
144     border-radius: 0 0 10px 0;
147 .que.ddimageortext .group5,
148 form.mform fieldset#id_previewareaheader .group5 {
149     background-color: #87cefa;
150     border-radius: 0 0 0 10px;
153 .que.ddimageortext .group6,
154 form.mform fieldset#id_previewareaheader .group6 {
155     background-color: #daa520;
156     border-radius: 0 10px 10px 0;
159 .que.ddimageortext .group7,
160 form.mform fieldset#id_previewareaheader .group7 {
161     background-color: #ffd700;
162     border-radius: 10px 0 0 10px;
165 .que.ddimageortext .group8,
166 form.mform fieldset#id_previewareaheader .group8 {
167     background-color: #f0e68c;
168     border-radius: 10px 10px 10px 10px;
171 /* Editing form. Style repeated elements*/
172 /*Top*/
173 body#page-question-type-ddimageortext div[id^=fgroup_id_][id*=drags_] {
174     background: #eee;
175     margin-top: 0;
176     margin-bottom: 0;
177     padding-bottom: 5px;
178     padding-top: 5px;
179     border: 1px solid #bbb;
180     border-bottom: 0;
183 body#page-question-type-ddimageortext div[id^=fgroup_id_][id*=drags_] .fgrouplabel label {
184     font-weight: bold;
186 /* Middle */
187 body#page-question-type-ddimageortext div[id^=fitem_id_][id*=dragitem_] {
188     background: #eee;
189     margin-bottom: 0;
190     margin-top: 0;
191     padding-bottom: 5px;
192     padding-top: 5px;
193     border: 1px solid #bbb;
194     border-top: 0;
195     border-bottom: 0;
197 /* Bottom */
198 body#page-question-type-ddimageortext div[id^=fitem_id_][id*=draglabel_] {
199     background: #eee;
200     margin-bottom: 2em;
201     margin-top: 0;
202     padding-bottom: 5px;
203     padding-top: 5px;
204     border: 1px solid #bbb;
205     border-top: 0;