Bug 16424: Add framework support to advanced MARC editor
[koha.git] / koha-tmpl / intranet-tmpl / prog / css / cateditor.css
1 /*> Infrastructure */
2 body {
3     padding: 0;
4 }
5
6 #loading {
7     background-color: #FFF;
8     cursor: wait;
9     height: 100%;
10     left: 0;
11     opacity: .7;
12     position: fixed;
13     top: 0;
14     width: 100%;
15     z-index: 1000;
16 }
17
18 #loading div {
19     background : transparent url(../img/loading.gif) top left no-repeat;
20     font-size : 175%;
21     font-weight: bold;
22     height: 2em;
23     left: 50%;
24     margin: -1em 0 0 -2.5em;
25     padding-left : 50px;
26     position: absolute;
27     top: 50%;
28     width: 15em;
29 }
30
31 #alerts-container {
32     font-size: 12px;
33 }
34
35 #alerts-container h3 {
36     font-size: inherit;
37 }
38
39 #alerts-container > ul {
40     padding: 0;
41 }
42
43 #alerts-container > ul > li {
44     border-bottom: 1px solid #DDD;
45     display: block;
46     padding: 4px 0;
47 }
48
49 #alerts-container > ul > li:first-child {
50     padding-top: 0;
51 }
52
53 #alerts-container > ul > li:last-child {
54     border-bottom: none;
55     padding-bottom: 0;
56 }
57
58 .humanMsg.humanSuccess {
59         left: 75%;
60     width: 20%;
61     top: 160px;
62 }
63
64 #shortcuts-container {
65     font-size: 12px;
66 }
67
68 /*> MARC editor */
69 #editor .CodeMirror {
70     line-height: 1.2;
71 }
72
73 .cm-tagnumber {
74     color: #080;
75     font-weight: bold;
76 }
77
78 .cm-bad-tagnumber {
79     color: #A20;
80     font-weight: bold;
81 }
82
83 .cm-indicator {
84     color: #884;
85 }
86
87 .cm-subfieldcode {
88     background-color: #F4F4F4;
89     color: #187848;
90     border-radius: 3px;
91     border-right: 2px solid white;
92     font-weight: bold;
93     padding-left: 3px;
94     padding-right: 3px;
95     margin-right: -2px;
96 }
97
98 .cm-bad-subfieldcode {
99     background-color: #FFD9D9;
100     color: #482828;
101     border-radius: 3px 8px 8px 3px;
102     font-weight: bold;
103 }
104
105 .cm-end-space {
106     background-color: #DDDDBB;
107 }
108
109 #editor .modified-line-gutter {
110     width: 10px;
111 }
112
113 #editor .modified-line {
114     background: #F8F8F8;
115     border-left: 5px solid black;
116     margin-left: -10px;
117     padding-left: 5px;
118 }
119
120 #editor .CodeMirror-gutters {
121     background: transparent;
122     border-right: none;
123 }
124
125 /*> MARC editor widgets */
126
127 #editor .subfield-widget {
128     color: #538200;
129     border: solid 2px #538200;
130     border-radius: 6px;
131     font-family: inherit;
132     line-height: 2.75;
133     margin: 3px 0;
134     padding: 4px;
135 }
136
137 #editor .subfield-widget select, #editor .subfield-widget input {
138     height: 1.5em;
139     vertical-align: middle;
140 }
141
142 #editor .subfield-widget select:focus {
143     outline: 2px #83A230 solid;
144 }
145
146 #editor .fixed-widget input {
147     width: 4em;
148 }
149
150 #editor .fixed-widget select {
151     width: 3em;
152 }
153
154 #editor .fixed-widget .material-select {
155     width: 4.5em;
156     margin-right: .5em;
157 }
158
159 #editor .fixed-collapsed {
160     display: inline-block;
161     margin: 0 .25em;
162     text-align: center;
163     text-decoration: underline;
164 }
165
166 #editor .hidden-widget {
167     color: #999999;
168     border: solid 2px #AAAAAA;
169     line-height: 2;
170     padding: 2px;
171 }
172
173 .structure-error {
174     background: #FFEEEE;
175     font-size: 0.9em;
176     line-height: 1.5;
177     margin: .5em;
178     padding: 0 .5em;
179 }
180
181 .structure-error i {
182     vertical-align: text-bottom;
183 }
184
185 #statusbar {
186     background-color: #F4F8F9;
187     border: solid 2px #b9d8d9;
188     border-bottom-style: none;
189     border-radius: 6px 6px 0 0;
190     margin-bottom: -32px;
191     overflow: auto;
192     padding: 4px;
193     padding-bottom: 0;
194 }
195
196 #statusbar #status-tag-info, #statusbar #status-subfield-info {
197     float: left;
198     overflow: hidden;
199     padding-right: 2%;
200     width: 48%;
201 }
202
203 #record-info .label {
204     float: none;
205 }
206
207 #record-info .label + span {
208     display: block;
209     padding-left: 1em;
210 }
211
212 /*> Search */
213
214 #advanced-search-ui .modal-lg, #search-results-ui .modal-lg, #macro-ui .modal-lg {
215     width: 90%;
216 }
217
218 .modal-body {
219     max-height: none;
220 }
221
222 .modal-lg .modal-body {
223     overflow-y: auto;
224 }
225
226 #quicksearch-overlay {
227     background: rgba(255, 255, 255, .9);
228     border: 2px solid #CC8877;
229     border-radius: 5px;
230     -moz-box-sizing: border-box;
231     -webkit-box-sizing: border-box;
232     box-sizing: border-box;
233     color: #664444;
234     position: relative;
235     vertical-align: middle;
236 }
237
238 #quicksearch-overlay h3 {
239     font-size: 1.5em%;
240     margin: 0;
241     text-align: center;
242     padding: 50px 5px;
243 }
244
245 #quicksearch-overlay p {
246     bottom: 0;
247     font-size: .8em;
248     overflow: hidden;
249     padding: 8px 15px;
250     position: absolute;
251     text-align: center;
252 }
253
254 #quicksearch input, #quicksearch a {
255     font-size: 1.2em;
256     padding: 3px 0;
257     width: 96%; /* I have no idea why this is necessary */
258 }
259
260 #show-advanced-search {
261     display: block;
262     margin-top: .3em;
263 }
264
265 #advanced-search-fields {
266     -moz-column-width: 26em;
267     -webkit-column-width: 26em;
268     column-width: 26em;
269     margin: 0;
270     padding: 0;
271 }
272
273 #advanced-search-fields li {
274     display: block;
275     list-style-type: none;
276 }
277
278 #advanced-search-fields label {
279     display: inline-block;
280     font-weight: bold;
281     padding: 1em 1em 1em 0;
282     width: 10em;
283     text-align: right;
284 }
285
286 #advanced-search-fields input {
287     display: inline-block;
288     margin: 0px auto;
289     width: 14em;
290 }
291
292
293 /*> Search results */
294
295 #search-serversinfo li {
296     list-style-type: none;
297 }
298
299 #search-serversinfo .search-toggle-server {
300     margin-right: 5px;
301 }
302
303 #searchresults table {
304     width: 100%;
305 }
306
307 .sourcecol {
308     width: 50px;
309 }
310
311 .results-info {
312     height: 100px;
313     overflow: auto;
314 }
315
316 .toolscol {
317     padding: 0;
318     width: 100px;
319 }
320
321 .toolscol ul {
322     margin: 0;
323     padding: 0;
324 }
325
326 #searchresults .toolscol li {
327     list-style-type: none;
328     list-style-image: none;
329 }
330
331 .toolscol a {
332     border-bottom: 1px solid #BCBCBC;
333     display: block;
334     padding: 0 1em;
335     line-height: 24px;
336 }
337
338 .marccol {
339     font-family: monospace;
340     height: auto;
341     white-space: pre-wrap;
342 }
343
344 #searchresults {
345     position: relative;
346 }
347
348 #search-overlay {
349     background: white;
350     bottom: 0;
351     font-size: 2em;
352     left: 0;
353     opacity: .7;
354     padding: 2em;
355     position: absolute;
356     right: 0;
357     text-align: center;
358     top: 0;
359     z-index: 9001;
360 }
361
362 /*> Macros */
363 #macro-save-message {
364     color: #666;
365     font-size: 13px;
366     float: right;
367     line-height: 26px;
368 }
369
370 #macro-list > li {
371     border: 2px solid #F0F0F0;
372     border-radius: 6px;
373     display: block;
374     font-size: 115%;
375 }
376
377 #macro-list > li + li {
378     margin-top: -2px;
379 }
380
381 #macro-list .active {
382     background: #EDF4F6;
383     border-color: none;
384 }
385
386 #macro-list a {
387     display: block;
388     padding: 6px;
389 }
390
391 #macro-list a:focus {
392     outline: none;
393 }
394
395 .macro-info {
396     background-color: #F4F4F4;
397     display: none;
398     margin: 0;
399     padding: 10px;
400     text-align: right;
401 }
402
403 .macro-info li {
404     color: #666;
405     font-size: 75%;
406     list-style-type: none;
407 }
408
409 .macro-info .label {
410     clear: left;
411     font-weight: bold;
412     float: left;
413 }
414
415 #macro-list .active .macro-info {
416     display: block;
417 }
418
419 .btn-toolbar label, .btn-toolbar select {
420     font-size: 13px;
421     vertical-align: middle;
422 }
423
424 .btn-toolbar label {
425     margin-left: 1em;
426 }
427
428 .btn-toolbar select {
429     padding: 2px;
430 }
431
432 #macro-editor {
433     display: flex;
434     flex-direction: column;
435     height: 100%;
436 }
437
438 #macro-editor .CodeMirror {
439     flex: 1;
440     font-size: 13px;
441 }
442
443 /* Hotpatch from latest CodeMirror: Fix gutter positioning */
444 .CodeMirror-gutter-wrapper {
445     position: absolute;
446 }