qfq-bs.css.less 23.2 KB
Newer Older
1
2
3
4
@spinner : url(data:image/gif;base64,R0lGODlhEAAQAKIAAP///9bW1szMzL29vXt7e3Nzc2ZmZv4BAiH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBwAHACwAAAAAEAAQAAADPAi6QRQrymJMkcwFatuLXOFt1bWEYBmNq6awGDCicUhjIYzBwTBAmc9CQBSkLJGiYKZi+EgdV60ZCwIjCQAh+QQFBwAHACwAAAYABgAIAAADE3gz1/LCwaYYbYTQYkxpnEdlRwIAIfkEBQcABwAsAAACAAYACAAAAxN4OqMnUKgoVzuEuGJMUZznZE4CACH5BAUHAAcALAIAAAAIAAYAAAMUeKozqyKKQ8iRohhTTjsa91DWkwAAIfkEBQcABwAsBgAAAAgABgAAAxR4RNddxhR3oDxjtHWEF9QHUtmRAAAh+QQFBwAHACwKAAIABgAIAAADFHhE12WmOCjbaviMgYUXzQc225EAACH5BAUHAAcALAoABgAGAAgAAAMTeEqkV8YUBaVjagwnulDel21KAgAh+QQFBwAHACwGAAoACAAGAAADFHiqRKvFmHLGOHGKLU47XPdYz5EAADs=);

@alert_container_id : #qfqAlertContainer;
@spinner_class : spinner;
5
@CodeMirror_border_color: #ccc;
6
7

@{alert_container_id} {
8
  position: fixed;
Rafael Ostertag's avatar
Rafael Ostertag committed
9
10
11
  top: 0;
  left: 0;
  width: 100%;
12
  z-index: 1000;
13
14

  .alert {
15
16
    padding: 30px;
    border-radius: 0px;
17
    margin-bottom: 2px;
18
19
20
    border-top: none;
    border-left: none;
    border-right: none;
21
  }
Benjamin Baer's avatar
Benjamin Baer committed
22

Carsten  Rose's avatar
Carsten Rose committed
23
  .alert + .alert {
Benjamin Baer's avatar
Benjamin Baer committed
24
25
    margin-top: -2px;
  }
Rafael Ostertag's avatar
Rafael Ostertag committed
26
27
}

28
29
30
31
32
33
34
i.@{spinner_class} {
  display: inline-block;
  background: @spinner no-repeat;
  //height: image-height(@spinner);
  //width: image-width(@spinner);
  height: 16px;
  width: 16px;
35
36
}

37
38
.qfq-dot {
  display: inline-block;
Benjamin Baer's avatar
Benjamin Baer committed
39
40
41
  height: 9px;
  width: 9px;
  margin: 1px;
42
43
44
45
46
  margin-left: 5px;
  background-color: #f2b867;
  border-radius: 50%;
}

47
48
49
50
.alert-buttons {
  margin-top: 10px;
}

Benjamin Baer's avatar
Benjamin Baer committed
51
52
53
54
/* CUSTOM RADIOS */

/* Hide the browser's default radio */
.radio-inline>input[type=radio], .radio>input[type=radio] {
55
56
57
58
59
60
61
62
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Customize the label (the container) */
Benjamin Baer's avatar
Benjamin Baer committed
63
.radio-inline, .radio {
64
65
66
67
68
69
70
71
72
73
74
75
76
77
  display: inline-block;
  position: relative;
  padding-left: 1.8em;
  padding-top: 0 !important;
  margin-top: 7px !important;
  margin-right: 10px;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Benjamin Baer's avatar
Benjamin Baer committed
78
79
80
81
.radio {
  display: block;
}

82
/* Create a custom radio button */
Benjamin Baer's avatar
Benjamin Baer committed
83
.radio-inline .checkmark, .radio .checkmark {
84
85
86
87
88
89
90
91
92
93
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #ccc;
}

Benjamin Baer's avatar
Benjamin Baer committed
94
.radio-inline:hover input ~ .checkmark, .radio:hover input ~ .checkmark {
Benjamin Baer's avatar
Benjamin Baer committed
95
  border-color: #2196F3;
96
97
}

Benjamin Baer's avatar
Benjamin Baer committed
98
.radio-inline input[type=radio]:checked ~ .checkmark, .radio input[type=radio]:checked ~ .checkmark {
99
100
101
102
103
104
105
106
107
108
109
110
  background-color: #2196F3;
  border-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
Benjamin Baer's avatar
Benjamin Baer committed
111
.radio-inline input[type=radio]:checked ~ .checkmark:after, .radio input[type=radio]:checked ~ .checkmark:after {
112
113
114
115
  display: block;
}

/* Style the indicator (dot/circle) */
Benjamin Baer's avatar
Benjamin Baer committed
116
.radio-inline .checkmark:after, .radio .checkmark:after {
117
118
119
120
121
122
123
124
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

Benjamin Baer's avatar
Benjamin Baer committed
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
/* CUSTOM CHECKBOXES */
/* Hide the browser's default radio */
.checkbox-inline>input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Customize the label (the container) */
.checkbox-inline, .checkbox {
  display: inline-block;
  position: relative;
  padding-left: 1.8em;
  padding-top: 0 !important;
  margin-top: 7px !important;
  margin-right: 10px;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
149
  font-weight: normal;
Benjamin Baer's avatar
Benjamin Baer committed
150
151
}

Benjamin Baer's avatar
Benjamin Baer committed
152
153
154
155
156
.checkbox-inline input:read-only ~ .checkmark {
  cursor: not-allowed;
  pointer-events: none;
}

Benjamin Baer's avatar
Benjamin Baer committed
157
158
159
160
.checkbox {
  display: block;
}

Benjamin Baer's avatar
Benjamin Baer committed
161
162
163
164
165
166
.qfq-disabled {
  cursor: not-allowed !important;
  pointer-events: none !important;
}


Benjamin Baer's avatar
Benjamin Baer committed
167
168
169
170
171
172
173
174
175
176
177
178
/* Create a custom radio button */
.checkbox-inline .checkmark, .checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border-radius: 4px;
  border: 2px solid #ccc;
}

Benjamin Baer's avatar
Benjamin Baer committed
179
180
181
.checkbox-inline:hover input ~ .checkmark, .checkbox:hover input ~ .checkmark,
.checkbox-inline input:focus ~ .checkmark, .checkbox input:focus ~ .checkmark,
.checkbox-inline input:active ~ .checkmark, .checkbox input:active ~ .checkmark {
Benjamin Baer's avatar
Benjamin Baer committed
182
  border-color: #66afe9;
Benjamin Baer's avatar
Benjamin Baer committed
183
184
185
186
187
188
189
}

.checkbox-inline input:checked ~ .checkmark, .checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
  border-color: #2196F3;
}

Benjamin Baer's avatar
Benjamin Baer committed
190
.checkbox-inline.qfq-disabled input ~ .checkmark, .checkbox.qfq-disabled input ~ .checkmark,
Benjamin Baer's avatar
Benjamin Baer committed
191
192
193
.checkbox-inline.qfq-disabled:hover input ~ .checkmark, .checkbox.qfq-disabled:hover input ~ .checkmark,
.radio-inline.qfq-disabled:hover input ~ .checkmark, .radio.qfq-disabled:hover input ~ .checkmark,
.radio-inline.qfq-disabled .checkmark, .radio.qfq-disabled .checkmark {
Benjamin Baer's avatar
Benjamin Baer committed
194
195
196
197
  background-color: #eee;
  border-color: #bbb;
}

Benjamin Baer's avatar
Benjamin Baer committed
198
199
.checkbox-inline.qfq-disabled input:checked ~ .checkmark, .checkbox.qfq-disabled input:checked ~ .checkmark,
.radio-inline.qfq-disabled input[type=radio]:checked ~ .checkmark, .radio.qfq-disabled input[type=radio]:checked ~ .checkmark {
Benjamin Baer's avatar
Benjamin Baer committed
200
201
202
203
  background-color: #ccc;
  border-color: #ccc;
}

Benjamin Baer's avatar
Benjamin Baer committed
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
/* Show the indicator (dot/circle) when checked */
.checkbox-inline input:checked ~ .checkmark:after, .checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.checkbox-inline .checkmark:after, .checkbox .checkmark:after {
  top: 1px;
  left: 4px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

222
223
/* ERROR HIGHLIGHTING */

Benjamin Baer's avatar
Benjamin Baer committed
224
/* Error Marking for Checkboxes */
225
226
227
228
.has-error .checkmark {
  background-color: #fcf8e3;
  border-color: #f2b867;
}
Benjamin Baer's avatar
Benjamin Baer committed
229
.has-error .radio-inline:hover input ~ .checkmark, .has-error .radio:hover input ~ .checkmark, .has-error .checkbox-inline:hover input ~ .checkmark, .has-error .checkbox:hover input ~ .checkmark {
230
  background-color: #f2b867;
Benjamin Baer's avatar
Benjamin Baer committed
231
}
232
233
234
235

.has-error .radio-inline, .has-error .radio, .has-error .checkbox, .has-error .checkbox-inline {
  color: #ca7a0a;
}
Benjamin Baer's avatar
Benjamin Baer committed
236
/* END CUSTOM CHECKBOX / RADIO */
Benjamin Baer's avatar
Benjamin Baer committed
237

Benjamin Baer's avatar
Benjamin Baer committed
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
.has-error .help-block {
  display: inline-block;
  padding: 6px 12px;
  padding-left: 25px;
  background-color: #f2b867;
  border-radius: 4px;
  color: #333;
}

.has-error .help-block:before {
  content: "\f0e7";  /* this is your text. You can also use UTF-8 character codes as I do here */
  font-family: FontAwesome;
  left:25px;
  position:absolute;
}

254
.qfq-only-active-error .with-errors.help-block {
255
256
  display: none;
  /* visibility: hidden;
257
  margin-bottom: 0;
258
259
260
261
262
263
264
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s linear, max-height 0.25s ease-out; */
265
266
}

267

Benjamin Baer's avatar
Benjamin Baer committed
268
269
270
271
272
273
274
275
276
.form-group.has-error .btn {
  background-color: #f0ad4e;
  background-image: linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%);
  background-repeat: repeat-x;
  border-color: #e38d13;
  font-weight: 200;
  color: #fff;
}

277
.input-group ~ .with-errors.help-block:not(.hidden), input:focus ~ .with-errors.help-block:not(.hidden), textarea:focus ~ .with-errors.help-block:not(.hidden) {
278
279
280
281
282
283
  display: inline-block;
  /* visibility: visible;
  max-height: 150px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 7px;
284
  opacity: 1;
285
  transition: opacity 1s linear, max-height 0.25s ease-out; */
286
287
288
289
290
291
}

.has-error .control-label {
  color: #333;
}

292
293
294
.help-block.with-errors ul {
  margin-bottom: 0px;
}
295

296
297
298
299
300
.has-error .form-control {
  background-color: #fcf8e3;
  border-width: medium;
  border-color: #f2b867;
}
301

302
303
304
305
306
307
.has-error .form-control:focus {
  background-color: #fcf8e3;
  border-color: #f2b867;
}

/* Color Variation Example Start */
Benjamin Baer's avatar
Benjamin Baer committed
308
.rebel-yell .has-error .form-control, .rebel-yell .has-error .form-control:focus {
309
310
311
312
313
  border-color: #d30b6f;
  background-color: #eb92be;
}

.rebel-yell .form-group.has-error .btn, .btn-rebel {
Benjamin Baer's avatar
Benjamin Baer committed
314
  background-color: #e72a89;
315
316
317
318
  background-image: linear-gradient(to bottom,#e72a89 0,#d30b6f 100%);
  background-repeat: repeat-x;
  border-color: #d30b6f;
  font-weight: 200;
Benjamin Baer's avatar
Benjamin Baer committed
319
  text-shadow: 0 1px 0 #e72a8;
320
321
322
323
324
  color: #333;
}

.rebel-yell .has-error .help-block {
  background-color: #e72a89;
Benjamin Baer's avatar
Benjamin Baer committed
325
326
}

Benjamin Baer's avatar
Benjamin Baer committed
327
328
329
330
.rebel-yell .qfq-dot {
  background-color: #e72a89;
}

Benjamin Baer's avatar
Benjamin Baer committed
331
332
.rebel-yell .checkbox-inline input:checked ~ .checkmark, .rebel-yell .checkbox input:checked ~ .checkmark,
.rebel-yell .radio-inline input[type=radio]:checked ~ .checkmark, .rebel-yell .radio input[type=radio]:checked ~ .checkmark {
Benjamin Baer's avatar
Benjamin Baer committed
333
334
335
336
  background-color: #e72a89;
  border-color: #e72a89;
}

337

338
339
340
/* Error Color Example End 
   Error Soft Example Start */

341
.qfq-notify .has-error .form-control {
342
343
344
  border-width: 1px;
}

345
.qfq-notify .has-error .help-block {
346
  padding-left: 12px;
347
348
349
  border: 0;
  padding: 0 12px;
  background-color: transparent;
Benjamin Baer's avatar
Benjamin Baer committed
350
  color: #ca7a0a;
351
352
}

Benjamin Baer's avatar
Benjamin Baer committed
353
.qfq-notify .has-error .help-block:before {
354
355
356
357
358
  content: "";  /* this is your text. You can also use UTF-8 character codes as I do here */
}

/* ERROR END */

359
360
361
362
.qfq-tinymce-readonly .mce-panel {
  background-color: #eee;
}

363

364
/* inline elements in horizontal mode are too much left */
365
366
367
368
369
370
.form-horizontal {
  .form-inline {
    .form-group {
      margin: 0;
    }
  }
Rafael Ostertag's avatar
Rafael Ostertag committed
371

372
373
  /* reduce unwished padding-top offset */
  .checkbox {
374
    padding-top: 7px;
375
  }
376

377
  .checkbox-inline {
378
    padding-top: 7px;
Benjamin Baer's avatar
Benjamin Baer committed
379
    padding-right: 12px;
380
    margin-top: 0;
381
382
  }

Benjamin Baer's avatar
Benjamin Baer committed
383
384
385
386
  .checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline {
    margin-left: 0;
  }

387
  .radio {
388
    padding-top: 7px;
389
390
391
392
393
  }

  input[type=file] {
    display: inline;
  }
394
395
}

396
397
// select:invalid: Dropdown with 'emptyItemAtStart' and required are grey on form load.
select.qfq-locked:invalid {
398
399
400
  color: #a0a0a0;
}

401
402
403
404
405
.form-inline {
  .control-label {
    font-weight: normal;
  }
}
406

407
408
409
410
.lower-canvas {
  background-color: #fff;
}

411
//.form-group.required.control-label:before{
Benjamin Baer's avatar
Benjamin Baer committed
412
//  color: red;/home/a/bbaer/PhpstormProjects/uzh_cd_template
413
414
415
416
417
//  content: "*";
//  position: absolute;
//  margin-left: -10px;
//}

418
.required-right:after {
419
420
  color: #d00;
  content: "*";
421
  //position: absolute;
422
  margin-left: 3px;
423
  //top: 10px;
424
425
}

426
427
428
429
430
431
432
433
.required-left:before {
  color: #d00;
  content: "*";
  //position: absolute;
  margin-right: 3px;
  //top: 10px;
}

434
435
436
437
438
439
440
441
442
443
.qfq-table-50 {
  min-width: 50%;
  width: auto;
}

.qfq-table-80 {
  min-width: 80%;
  width: auto;
}

444
445
446
447
448
.qfq-table-100 {
  min-width: 100%;
  width: auto;
}

449
.qfq-fieldset {
450
451
  margin-top: 5px;
  margin-bottom: 15px;
452
453
}

Benjamin Baer's avatar
Benjamin Baer committed
454

455
.qfq-form-pill {
Benjamin Baer's avatar
Benjamin Baer committed
456
  /*
457
  border-top-right-radius: 4px;
Benjamin Baer's avatar
Benjamin Baer committed
458
459
460
  border-top-left-radius: 4px; */
  border: 1px solid #ccc;
  border-top: none;
461
462
}

Benjamin Baer's avatar
Benjamin Baer committed
463

464
465
466
467
468
.qfq-form-body {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
Benjamin Baer's avatar
Benjamin Baer committed
469
470
  border: 1px solid #ccc;
  border-top: none;
471
472
}

473
474
475
476
477
478
.qfq-form-no-title {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border: 1px solid #ccc;
}

479
480
481
482
483
484
485
/* adjust BS padding of input elements: center */
.form-group {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 0;
}

486
487
488
489
490
/* adjust BS padding: Filename (=Text) of the uploaded file should be on the same base line as the label text left of it. */
.uploaded-file {
  padding-top: 4px;
}

Benjamin Baer's avatar
Benjamin Baer committed
491
.qfq-subrecord-table {
492
  margin-top: -5px;
493
494
  min-width: 100%;
  width: auto;
Benjamin Baer's avatar
Benjamin Baer committed
495
496
}

497
.qfq-form-title {
Benjamin Baer's avatar
Benjamin Baer committed
498
  border: 1px solid #ccc;
499
  border-radius: 4px 4px 0 0;
Benjamin Baer's avatar
Benjamin Baer committed
500
501
  background-image: linear-gradient(to bottom, #fefefe 0, #dedede 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
502
  min-height: 45px;
Benjamin Baer's avatar
Benjamin Baer committed
503
  font-size: 1.2em;
504
  padding: 13px 15px;
Benjamin Baer's avatar
Benjamin Baer committed
505
506
507
  font-weight: bold;
}

Benjamin Baer's avatar
Benjamin Baer committed
508
509
510
511
.qfq-table-button-width {
  width: 44px;
}

Benjamin Baer's avatar
Benjamin Baer committed
512
513
514
515
516
517
.qfq-comment-marker {
  position: absolute;
  right: 22px;
  z-index: 2;
}

Benjamin Baer's avatar
Benjamin Baer committed
518
519
520
521
.nav-pills>li>a {
  border-radius: 0;
}

522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
.qfq-color-white {
  background-color: #ffffff;
}

.qfq-color-grey-1 {
  background-color: #dedede;
}

.qfq-color-grey-2 {
  background-color: #ededed;
}

.qfq-color-blue-1 {
  background-color: #d2dded;
}

.qfq-color-blue-2 {
Benjamin Baer's avatar
Benjamin Baer committed
539
  background-color: #e2eeff;
540
541
542
543
544
545
}

.qfq-form-right .qfq-label {
  text-align: right;
  padding-right: 0;
}
546

547
548
549
.qfq-child-margin-top + .qfq-child-margin-top {
  margin-top: 15px;
}
550
551

.qfq-note {
552
  padding-top: 2px;
553
}
554

555
556
557
558
.control-label .small, .control-label small {
  font-weight: normal;
}

559
560
561
562
.label-rebel {
  background-color: #e72a89;
}

Benjamin Baer's avatar
Benjamin Baer committed
563
// Fabric Plugin classes
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580

.qfq-fabric-bar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  min-height: 41px;
  z-index: 100;
  border: 1px solid #ccc;
  background-color: #ededed;
  padding: 5px;
}

.qfq-fabric-bar .btn {
  padding: 3px 8px;
}

Benjamin Baer's avatar
Benjamin Baer committed
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
.fabric-text {
  width: 100%;
  height: 80px;
}

#text-bg-submit {
  background-color: #ccc;
  height: 24px;
  border: none;
}

.text-bg-toggle {
  width: 24px;
  height: 24px;
  background-size: contain;
  border: none;
}

599
.color-picker {
600
  margin-top: 2px;
601
602
}

Carsten  Rose's avatar
Carsten Rose committed
603
.color-picker > button {
604
605
606
607
608
609
610
611
612
613
614
615
  margin-right: 2px;
}

.qfq-fabric-image {
  display: none;
}

// Emoji

.emoji {
  display: inline-block;
  border: none;
616
  /*background-color: #fff;*/
617
618
619
620
621
  width: 32px;
  height: 32px;
  margin: 5px;
}

Benjamin Baer's avatar
Benjamin Baer committed
622

623
624
625
626
627
// typeAhead Input: Default Bootstrap column width
.twitter-typeahead {
  display: block !important;
}

628
629
.qfq-cc-style {
  font-size: 0.8em;
630
  color: #777;
Carsten  Rose's avatar
Carsten Rose committed
631
632
633
634
635
  //position: relative;
  //top: -24px;
  //right: 10px;
  //text-align: right;
  //display: block;
636
637
}

638
// TypeAhead Suggestions
639
640
641
642
643
644
645
646
.tt-menu {
  background-color: #fff;
  border-left: 1px solid #66afe9;
  border-right: 1px solid #66afe9;
  border-bottom: 1px solid #66afe9;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  width: 100%;
}

@media (min-width: 768px) {
  .form-horizontal .control-label {
    text-align: unset;
  }
}

.tt-suggestion {
  cursor: pointer;
  cursor: hand;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 6px;
  padding-top: 12px;
664
665
666
}

.tt-suggestion + .tt-suggestion {
667
668
669
670
671
  padding-top: 6px;
}

.tt-suggestion:hover {
  background-color: rgba(102, 175, 233, .6);
672
}
673

674
675
676
677
// Workaround as long as rendering of notes can't be specific.
.qfq-note-no-padding {
  margin-top: -7px;
}
678

679
680
681
682
683
684
685
686
// Mit BB anschauen wie man die NOTE Felder formatiert
//
//.text-input {
//  padding-top: 7px;
//}
//
//.text-note {
//  padding-top: 7px;
687
688
689
690
691
//}

.CodeMirror {
  border: 1px solid @CodeMirror_border_color;
  border-radius: 4px;
Carsten  Rose's avatar
Carsten Rose committed
692
693
694
}

//}
Carsten  Rose's avatar
Carsten Rose committed
695

Benjamin Baer's avatar
Benjamin Baer committed
696
697
698
699
700
701
702
703
704
705
706
707
708
709
/* classes for toggleable note mockup, bb */
.qfq-icon-inside {
  position: relative;
  top: -22px;
  left: calc(100% - 26px);
}

.qfq-margin-top {
  margin-top: 10px;
}

/* spinning icons */

.text-large-with-margin {
710
711
  font-size: 92px;
  line-height: normal;
Benjamin Baer's avatar
Benjamin Baer committed
712
713
714
  margin: 0.4em;
}

715
716
717
718
719
720
.qfq-icon-gear {
  height: 190px;
  width: 190px;
  margin: 1em;
}

Benjamin Baer's avatar
Benjamin Baer committed
721
.glyphicon-spin {
722
723
  -webkit-animation: spin 2350ms infinite linear;
  animation: spin 2350ms infinite linear;
Benjamin Baer's avatar
Benjamin Baer committed
724
}
Carsten  Rose's avatar
Carsten Rose committed
725

Benjamin Baer's avatar
Benjamin Baer committed
726
727
728
729
730
731
732
733
734
735
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
Carsten  Rose's avatar
Carsten Rose committed
736

Benjamin Baer's avatar
Benjamin Baer committed
737
738
739
740
741
742
743
744
745
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
746
747
}

748
.noclick {
749
  pointer-events: none;
750
}
751

752
753
// Buttons: full width
.qfq-100 {
754
  width: 100%;
755
756
757
758
}

// Buttons: text left aligned
.qfq-left {
759
  text-align: left;
Benjamin Baer's avatar
Benjamin Baer committed
760
761
762
}

.alert-interactive {
763
  position: fixed;
Benjamin Baer's avatar
Benjamin Baer committed
764
765
766
767
  display: box;
  left: 50%;
  transform: translate(-50%,0);
  top: 200px;
768
  max-height: 60%;
Benjamin Baer's avatar
Benjamin Baer committed
769
770
  padding: 20px;
  color: #d0d0d0;
771
772
  min-width: 24%;
  max-width: 90%;
Benjamin Baer's avatar
Benjamin Baer committed
773
774
  border-left: 5px solid;
  background-color: #333;
775
776
  overflow-y: auto;
  overflow-x: hidden;
Benjamin Baer's avatar
Benjamin Baer committed
777
778
}

Benjamin Baer's avatar
Benjamin Baer committed
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
.alert-side > p.body {
  margin: 0px;
  overflow: hidden;
  white-space: nowrap;
}

.alert-side {
  position: fixed;
  display: box;
  right: 0px;
  top: 20px;
  padding: 20px;
  color: #d0d0d0;
  border-left: 5px solid;
  background-color: #333;
794
  z-index: 10000; /* Always on top */
Benjamin Baer's avatar
Benjamin Baer committed
795
796
}

Benjamin Baer's avatar
Benjamin Baer committed
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
.border-success {
  border-color: #5cb85c;
}

.border-error {
  border-color: #fb4f4f;
}

.border-warning {
  border-color: #fbb64f;
}

.border-info {
  border-color: #25adf1;
}

Benjamin Baer's avatar
Benjamin Baer committed
813
814
815
816
817
818
819
820
821
822
823
824
825
826
.blockscreenQfq {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 998;
  filter: blur(23px);
  background: rgba(255, 255, 255, 0.5);
}

.blur {
  filter: blur(2px);
}

Benjamin Baer's avatar
Benjamin Baer committed
827
828
829
830
831
832
833
834
.alert-interactive p.title {
  font-size: 1.5em;
  margin-bottom: 0px;
}

.alert-interactive p.buttons {
  margin-top: 20px;
  text-align: center;
Benjamin Baer's avatar
Benjamin Baer committed
835
836
}

837
838
839
840
841
.alert-interactive .table-hover>tbody>tr:hover {
  color: #333;
  background-image: linear-gradient(to bottom,#b9def0 0,#9acfea 100%)
}

Benjamin Baer's avatar
Benjamin Baer committed
842

Benjamin Baer's avatar
Benjamin Baer committed
843
844
845
// Code Correction

.codeCorrectionWrap {
846
  border: 1px solid #ccc;
Benjamin Baer's avatar
Benjamin Baer committed
847
  border-top: unset;
Benjamin Baer's avatar
Benjamin Baer committed
848
  margin-bottom: 10px;
Benjamin Baer's avatar
Benjamin Baer committed
849
850
}

Benjamin Baer's avatar
Benjamin Baer committed
851
852
853
854
855
856
857
858
.qfqCodeCorrectionTitle {
  border: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
  background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
  height: 40px;
};

Benjamin Baer's avatar
Benjamin Baer committed
859
.qfqLineCount {
860
  user-select: none;
Benjamin Baer's avatar
Benjamin Baer committed
861
  width: 50px;
862
  height: 100%;
Benjamin Baer's avatar
Benjamin Baer committed
863
  text-align: right;
864
865
866
867
868
869
870
871
872
873
  border-right: 1px solid #ccc;
  padding-right: 10px;
  line-height: 23px;
  background-color: #efefef;
}

.qfqCode  {
  width: ~"calc(100% - 50px)";
  min-height: 23px;
  padding-left: 15px;
Benjamin Baer's avatar
Benjamin Baer committed
874
  padding-right: 15px;
875
876
877
  text-align: left;
  font-size: 1.2em;
  font-family: monospace;
Benjamin Baer's avatar
Benjamin Baer committed
878
  word-break: break-word;
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
}

.qfqCodeLine {
  background-color: #fff;
}

.qfqCodeLine:hover {
  background-color: #efefef;
}

.qfqCodeLine:hover .qfqLineCount {
  background-color: #b9def0;
  border-color: #9acfea;
  color: #31708f;
}

.qfqCommentContainer {
  color: #333;
  height: 100%;
Benjamin Baer's avatar
Benjamin Baer committed
898
  padding-bottom: 20px;
Benjamin Baer's avatar
Benjamin Baer committed
899
900
}

Benjamin Baer's avatar
Benjamin Baer committed
901
902
903
904
.qfqComment {
  display: grid;
  position: relative;
  grid-template-columns: 110px auto;
Benjamin Baer's avatar
Benjamin Baer committed
905
  grid-template-rows: 30px auto;
Benjamin Baer's avatar
Benjamin Baer committed
906
  margin: 10px;
907
  margin-top: 20px;
Benjamin Baer's avatar
Benjamin Baer committed
908
909
910
}

.qfqCommentAvatar {
911
  background-color: #fff;
Benjamin Baer's avatar
Benjamin Baer committed
912
913
914
  grid-column: 1;
  grid-row-start: 1;
  grid-row-end: 2;
Benjamin Baer's avatar
Benjamin Baer committed
915
  align-self: start;
Benjamin Baer's avatar
Benjamin Baer committed
916
  width: 100px;
917
  height: 120px;
Benjamin Baer's avatar
Benjamin Baer committed
918
  border: 1px solid #ccc;
919
  padding: 4px;
920
  padding-bottom: 20px;
921
  /*transform: rotate(20deg);*/
Benjamin Baer's avatar
Benjamin Baer committed
922
923
924
925
}

.qfqCommentAuthor {
  position: absolute;
926
927
  top: 10px;
  left: 10px;
928
  font-weight: bold;
Benjamin Baer's avatar
Benjamin Baer committed
929
930
931
}

.qfqCommentText {
Benjamin Baer's avatar
Benjamin Baer committed
932
  position: relative;
Benjamin Baer's avatar
Benjamin Baer committed
933
  grid-column: 2;
Benjamin Baer's avatar
Benjamin Baer committed
934
  grid-row: 2;
Benjamin Baer's avatar
Benjamin Baer committed
935
936
  background-color: #fff;
  width: 100%;
Benjamin Baer's avatar
Benjamin Baer committed
937
938
  min-height: 90px;
  height: 100%;
939
  padding: 10px;
Benjamin Baer's avatar
Benjamin Baer committed
940
  padding-bottom: 25px;
Benjamin Baer's avatar
Benjamin Baer committed
941
942
943
944
945
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 5px 5px;
}

Benjamin Baer's avatar
Benjamin Baer committed
946
947
948
949
950
951
952
953
954
.qfqCommentCommands {
  position: absolute;
  bottom: 5px;
  right: 15px;
  width: 100%;
  color: #ccc;
  text-align: right;
}

955
.qfqCommentCommand {
Benjamin Baer's avatar
Benjamin Baer committed
956
  cursor: pointer;
957
  margin-left: 9px;
Benjamin Baer's avatar
Benjamin Baer committed
958
959
}

960
.qfqCommentCommand:hover {
Benjamin Baer's avatar
Benjamin Baer committed
961
962
963
  color: #9acfea;
}

Benjamin Baer's avatar
Benjamin Baer committed
964
965
966
967
968
.qfqCommentTopLine {
  position: relative;
  grid-row: 1;
  grid-column: 2;
  border: 1px solid #ccc;
969
  border-bottom: none;
Benjamin Baer's avatar
Benjamin Baer committed
970
971
972
973
974
975
  border-radius: 5px 5px 0 0;
  background-color: #fff;
}

.qfqCommentDateTime {
  position: absolute;
976
977
  right: 10px;
  top: 10px;
Benjamin Baer's avatar
Benjamin Baer committed
978
979
980
981
  color: grey;
  font-size: 0.8em;
}

982
983
984
985
986
987
988
.qfqEditorContainer {
  display: grid;
  position: relative;
  width: 100%;
  grid-template-columns: auto 110px;
  grid-template-rows: auto;
  margin: 20px 10px 10px;
Benjamin Baer's avatar
Benjamin Baer committed
989
990
}

991
.qfqEditor {
992
993
  z-index: 1;
  position: relative;
994
995
996
  grid-column: 1;
  width: 100%;
  min-height: 100px;
997
998
999
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
1000
1001
  padding: 10px;
  padding-left: 40px;
1002
1003
1004
1005
1006
1007
}

.qfqEditorControls {
  grid-column: 2;
  width: 100%;
  padding-left: 10px;
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
}

.qfqCodeElement {
  display: block;
  background: #333;
  color: #eee;
  margin: 10px;
  padding: 15px;
  border-left: 2px solid #5cb85c;
}

.qfqEditor ul {
  margin: 10px;
}

.qfqEditorControl {
  z-index: 5;
  cursor: pointer;
  color: #ccc;
  position: absolute;
  left: 10px;
}

.qfqEditorControl:hover {
  color: #9acfea;
}

.qfqCodeAdd {
  top: 10px;
}

.qfqCodeList {
  top: 35px;
Benjamin Baer's avatar
Benjamin Baer committed
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
}

.qfqSyntaxDoc {
  color: #888;
}

.qfqSyntaxWord {
  font-weight: bold;
  color: #31708f;
}

.qfqSyntaxData {
  color: #5cb85c;
Benjamin Baer's avatar
Benjamin Baer committed
1054
}
Benjamin Baer's avatar
Benjamin Baer committed
1055

1056
1057
.qfqDropTarget {
  height: 50px;
Benjamin Baer's avatar
Benjamin Baer committed
1058
  margin: 0;
1059
1060
1061
1062
1063
  border: 1px dashed #ccc;
}

.qfqTargetDisplay {
  border: 1px dashed #25adf1;
1064
1065
}

1066
span.qfq-more-text {
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
  display: none;
}

.qfq-clear-me-button {
  display: block;
  content: '\f00d';
  font-family: FontAwesome;
  right:21px;
  width: 30px;
  height: 30px;
  top: 2px;
  position:absolute;
  cursor: pointer;
}
.qfq-clear-me-button:before {
  content: '\f00d';
  font-family: FontAwesome;
  position: absolute;
  color: #aaa;
  font-size: 21px;
  left: 12px;
}

input.qfq-clear-me {
  padding-right: 28px;
1092
1093
}

1094
1095
1096
1097
// Droplets

.qfq-droplet-container {
  position: absolute;
1098
  border-radius: 6px;
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
  padding: 15px;
}

.qfq-droplet-container:before {
  content: ' ';
  position: absolute;
  left: 10px;
  top: -10px;
  border: 5px solid;
}

.qfq-droplet-container:after {
  content: ' ';
  position: absolute;
1113
  left: 20px;
1114
1115
  top: -10px;
  border: 5px solid;
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
}

.qfq-droplet-grey {
  border: 2px solid #ccc;
  background-image: linear-gradient(to bottom,#f0f0f0 0,#e0e0e0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}

.qfq-droplet-container.qfq-droplet-grey:after {
  border-color: transparent transparent #ccc #ccc;
}

.qfq-droplet-container.qfq-droplet-grey:before {
  border-color: transparent #ccc #ccc transparent;
}

.qfq-droplet-blue {
  border: 2px solid #25adf1;
  background-image: linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);
}

.qfq-droplet-container.qfq-droplet-blue:after {
1138
  border-color: transparent transparent #25adf1 #25adf1;
1139
1140
1141
1142
}

.qfq-droplet-container.qfq-droplet-blue:before {
  border-color: transparent #25adf1 #25adf1 transparent;
1143
1144
1145
1146
}

.qfq-wavy-underline {
  background: url('../icons/wavy-underline.gif') bottom repeat-x
Benjamin Baer's avatar
Benjamin Baer committed
1147
1148
}

1149
legend {
Benjamin Baer's avatar
Benjamin Baer committed
1150
1151
  margin-bottom: 25px;
  padding-bottom: 5px;
1152
  font-size: 17px;
1153
1154
}

Benjamin Baer's avatar
Benjamin Baer committed
1155
1156
1157
1158
1159
1160
1161
.qfq-fieldset {
  margin-top: 38px;
}

.qfq-fieldset:first-child {
  margin-top: 15px;
}
Benjamin Baer's avatar
Benjamin Baer committed
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
/* glyphicon functions */
.icon-flipped {
  transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
}

.icon-spin {
  display: block;
}

.icon-spin:hover {
  -webkit-animation: spin 850ms 1 ease-in;
  animation: spin 850ms 1 ease-in;
}

.icon-spin-reverse {
  display: block;
}

.icon-spin-reverse:hover {
  -webkit-animation: spin-reverse 850ms 1 ease-in;
  animation: spin-reverse 850ms 1 ease-in;
}

@keyframes spin-reverse {
  0% {
    transform: scaleX(-1) rotate(-360deg);
  }
  100% {
    transform: scaleX(-1) rotate(0deg);
  }
Carsten  Rose's avatar
Carsten Rose committed
1195
1196
}

1197
1198
1199
1200
1201
1202
.qfq-sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

1203
thead.qfq-sticky th, thead.qfq-sticky td {
1204
  position: -webkit-sticky; /* Safari */
Carsten  Rose's avatar
Carsten Rose committed
1205
1206
1207
  position: sticky;
  top: 0;
  background-color: white;
Benjamin Baer's avatar
Benjamin Baer committed
1208
  z-index: 900;
Carsten  Rose's avatar
Carsten Rose committed
1209
1210
}

1211
thead.qfq-sticky td {
1212
  top: 33px;
Carsten  Rose's avatar
Carsten Rose committed
1213
}
1214
1215

.dropdown-menu {
1216
  z-index: 920;
1217
1218
}

1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
// No colorized badges in BS3: make our own
.qfq-badge {
  padding: 1px 9px 2px;
  font-size: 12.025px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

.qfq-badge:hover {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.qfq-badge-error {
  background-color: #b94a48;
}

.qfq-badge-error:hover {
  background-color: #953b39;
}

.qfq-badge-warning {
  background-color: #f89406;
}

.qfq-badge-warning:hover {
  background-color: #c67605;
}

.qfq-badge-success {
  background-color: #468847;
}

.qfq-badge-success:hover {
  background-color: #356635;
}

.qfq-badge-info {
  background-color: #3a87ad;
}

.qfq-badge-info:hover {
  background-color: #2d6987;
}

.qfq-badge-inverse {
  background-color: #333333;
}
1273

1274
1275
.qfq-badge-inverse:hover {
  background-color: #1a1a1a;
1276
}