MDL-52927 qtype ddwtos and ddimageortext focus using keyboard
[moodle.git] / question / type / ddimageortext / styles.css
1 .que.ddimageortext .qtext {
2     margin-bottom: 0.5em;
3     display: block;
4 }
6 .que.ddimageortext div.droparea img, form.mform fieldset#id_previewareaheader div.droparea img  {
7     border: 1px solid #000000;
8     max-width: none;
9 }
11 .que.ddimageortext .draghome, form.mform fieldset#id_previewareaheader .draghome {
12     vertical-align: top;
13     margin: 5px;
14     visibility : hidden;
15 }
17 .que.ddimageortext div.draghome, form.mform fieldset#id_previewareaheader div.draghome {
18     border: 1px solid black;
19     cursor: move;
20     background-color: #B0C4DE;
21     display:inline-block;
22     height: auto;
23     width: auto;
24     zoom: 1;
25 }
27 .que.ddimageortext .group1, form.mform fieldset#id_previewareaheader .group1 {
28     background-color: #FFFFFF;
29 }
30 .que.ddimageortext .group2, form.mform fieldset#id_previewareaheader .group2 {
31     background-color: #B0C4DE;
32 }
33 .que.ddimageortext .group3, form.mform fieldset#id_previewareaheader .group3 {
34     background-color: #DCDCDC;
35 }
36 .que.ddimageortext .group4, form.mform fieldset#id_previewareaheader .group4 {
37     background-color: #D8BFD8;
38 }
39 .que.ddimageortext .group5, form.mform fieldset#id_previewareaheader .group5 {
40     background-color: #87CEFA;
41 }
42 .que.ddimageortext .group6, form.mform fieldset#id_previewareaheader .group6 {
43     background-color: #DAA520;
44 }
45 .que.ddimageortext .group7, form.mform fieldset#id_previewareaheader .group7 {
46     background-color: #FFD700;
47 }
48 .que.ddimageortext .group8, form.mform fieldset#id_previewareaheader .group8 {
49     background-color: #F0E68C;
50 }
51 .que.ddimageortext .drag, form.mform fieldset#id_previewareaheader .drag {
52     border: 1px solid black;
53     cursor: move;
54     z-index: 2;
55 }
56 .que.ddimageortext .dragitems.readonly .drag {
57     cursor: auto;
58 }
59 .que.ddimageortext div.ddarea, form.mform fieldset#id_previewareaheader div.ddarea {
60     text-align : center;
61 }
62 .que.ddimageortext .dropbackground, form.mform fieldset#id_previewareaheader .dropbackground {
63     margin:0 auto;
64 }
65 .que.ddimageortext .dropzone {
66     border: 1px solid black;
67     position: absolute;
68     z-index: 1;
69 }
71 .que.ddimageortext .dropzone:focus,
72 .que.ddimageortext .dropzone.yui3-dd-drop-over.yui3-dd-drop-active-valid {
73     border-color: #0a0;
74     box-shadow: 0 0 5px 5px rgba(255, 255, 150, 1);
75 }
77 .que.ddimageortext div.dragitems div.draghome, .que.ddimageortext div.dragitems div.drag,
78 form.mform fieldset#id_previewareaheader div.draghome, form.mform fieldset#id_previewareaheader div.drag {
79     font:13px/1.231 arial,helvetica,clean,sans-serif;
80 }
81 form.mform fieldset#id_previewareaheader div.drag.yui3-dd-dragging,
82 .que.ddimageortext div.drag.yui3-dd-dragging {
83     z-index: 3;
84     box-shadow: 3px 3px 4px #000;
85 }
86 /* Editing form. Style repeated elements*/
87 /*Top*/
88 body#page-question-type-ddimageortext div[id^=fgroup_id_][id*=drags_] {
89     background: #EEE;
90     margin-top: 0;
91     margin-bottom: 0;
92     padding-bottom: 5px;
93     padding-top: 5px;
94     border: 1px solid #BBB;
95     border-bottom: 0;
96 }
97 body#page-question-type-ddimageortext div[id^=fgroup_id_][id*=drags_] .fgrouplabel label {
98     font-weight: bold;
99 }
100 /* Middle */
101 body#page-question-type-ddimageortext div[id^=fitem_id_][id*=dragitem_] {
102     background: #EEE;
103     margin-bottom: 0;
104     margin-top: 0;
105     padding-bottom: 5px;
106     padding-top: 5px;
107     border: 1px solid #BBB;
108     border-top: 0;
109     border-bottom: 0;
111 /* Bottom */
112 body#page-question-type-ddimageortext div[id^=fitem_id_][id*=draglabel_] {
113     background: #EEE;
114     margin-bottom: 2em;
115     margin-top: 0;
116     padding-bottom: 5px;
117     padding-top: 5px;
118     border: 1px solid #BBB;
119     border-top: 0;