qfq-bs.css.less 24.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
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
Benjamin Baer's avatar
Benjamin Baer committed
60
61
  -moz-appearance: none;
  /*Radios don't scale correctly on Firefox with zoom*/
62
63
64
}

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

Benjamin Baer's avatar
Benjamin Baer committed
81
82
83
84
.radio {
  display: block;
}

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

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

Benjamin Baer's avatar
Benjamin Baer committed
101
.radio-inline input[type=radio]:checked ~ .checkmark, .radio input[type=radio]:checked ~ .checkmark {
102
103
104
105
106
107
108
109
110
111
112
113
  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
114
.radio-inline input[type=radio]:checked ~ .checkmark:after, .radio input[type=radio]:checked ~ .checkmark:after {
115
116
117
118
  display: block;
}

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

Benjamin Baer's avatar
Benjamin Baer committed
128
129
/* CUSTOM CHECKBOXES */
/* Hide the browser's default radio */
Benjamin Baer's avatar
Benjamin Baer committed
130
.checkbox-inline>input[type=checkbox], .checkbox>input[type=checkbox] {
Benjamin Baer's avatar
Benjamin Baer committed
131
132
133
134
135
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
Benjamin Baer's avatar
Benjamin Baer committed
136
137
  -moz-appearance: none;
  /*Checkboxes don't scale correctly on Firefox with zoom*/
Benjamin Baer's avatar
Benjamin Baer committed
138
139
140
141
142
143
}

/* Customize the label (the container) */
.checkbox-inline, .checkbox {
  display: inline-block;
  position: relative;
Benjamin Baer's avatar
Benjamin Baer committed
144
  padding-left: 26px;
Benjamin Baer's avatar
Benjamin Baer committed
145
146
147
148
149
  padding-top: 0 !important;
  margin-top: 7px !important;
  margin-right: 10px;
  cursor: pointer;
  font-size: 1em;
Benjamin Baer's avatar
Benjamin Baer committed
150
  line-height: 20px;
Benjamin Baer's avatar
Benjamin Baer committed
151
152
153
154
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
155
  font-weight: normal;
Benjamin Baer's avatar
Benjamin Baer committed
156
157
}

Benjamin Baer's avatar
Benjamin Baer committed
158
159
160
161
162
.checkbox-inline input:read-only ~ .checkmark {
  cursor: not-allowed;
  pointer-events: none;
}

Benjamin Baer's avatar
Benjamin Baer committed
163
164
165
166
.checkbox {
  display: block;
}

Benjamin Baer's avatar
Benjamin Baer committed
167
168
169
170
171
172
.qfq-disabled {
  cursor: not-allowed !important;
  pointer-events: none !important;
}


Benjamin Baer's avatar
Benjamin Baer committed
173
174
175
/* Create a custom radio button */
.checkbox-inline .checkmark, .checkbox .checkmark {
  position: absolute;
Benjamin Baer's avatar
Benjamin Baer committed
176
177
178
179
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
Benjamin Baer's avatar
Benjamin Baer committed
180
  background-color: #fff;
Benjamin Baer's avatar
Benjamin Baer committed
181
  border-radius: 5px;
Benjamin Baer's avatar
Benjamin Baer committed
182
183
184
  border: 2px solid #ccc;
}

Benjamin Baer's avatar
Benjamin Baer committed
185
186
187
.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
188
  border-color: #66afe9;
Benjamin Baer's avatar
Benjamin Baer committed
189
190
191
192
193
194
195
}

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

Benjamin Baer's avatar
Benjamin Baer committed
196
.checkbox-inline.qfq-disabled input ~ .checkmark, .checkbox.qfq-disabled input ~ .checkmark,
Benjamin Baer's avatar
Benjamin Baer committed
197
198
199
.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
200
201
202
203
  background-color: #eee;
  border-color: #bbb;
}

Benjamin Baer's avatar
Benjamin Baer committed
204
205
.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
206
207
208
209
  background-color: #ccc;
  border-color: #ccc;
}

Benjamin Baer's avatar
Benjamin Baer committed
210
211
212
213
214
215
216
/* 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 {
Benjamin Baer's avatar
Benjamin Baer committed
217
218
  top: 1px;
  left: 5px;
Benjamin Baer's avatar
Benjamin Baer committed
219
  width: 6px;
Benjamin Baer's avatar
Benjamin Baer committed
220
  height: 12px;
Benjamin Baer's avatar
Benjamin Baer committed
221
222
223
224
225
226
227
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

228
229
/* ERROR HIGHLIGHTING */

Benjamin Baer's avatar
Benjamin Baer committed
230
/* Error Marking for Checkboxes */
231
232
233
234
.has-error .checkmark {
  background-color: #fcf8e3;
  border-color: #f2b867;
}
Benjamin Baer's avatar
Benjamin Baer committed
235
.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 {
236
  background-color: #f2b867;
Benjamin Baer's avatar
Benjamin Baer committed
237
}
238
239
240
241

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

Benjamin Baer's avatar
Benjamin Baer committed
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
.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;
}

260
.qfq-only-active-error .with-errors.help-block {
261
262
  display: none;
  /* visibility: hidden;
263
  margin-bottom: 0;
264
265
266
267
268
269
270
  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; */
271
272
}

273

Benjamin Baer's avatar
Benjamin Baer committed
274
275
276
277
278
279
280
281
282
.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;
}

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

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

298
299
300
.help-block.with-errors ul {
  margin-bottom: 0px;
}
301

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

308
309
310
311
312
313
.has-error .form-control:focus {
  background-color: #fcf8e3;
  border-color: #f2b867;
}

/* Color Variation Example Start */
Benjamin Baer's avatar
Benjamin Baer committed
314
.rebel-yell .has-error .form-control, .rebel-yell .has-error .form-control:focus {
315
316
317
318
319
  border-color: #d30b6f;
  background-color: #eb92be;
}

.rebel-yell .form-group.has-error .btn, .btn-rebel {
Benjamin Baer's avatar
Benjamin Baer committed
320
  background-color: #e72a89;
321
322
323
324
  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
325
  text-shadow: 0 1px 0 #e72a8;
326
327
328
329
330
  color: #333;
}

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

Benjamin Baer's avatar
Benjamin Baer committed
333
334
335
336
.rebel-yell .qfq-dot {
  background-color: #e72a89;
}

Benjamin Baer's avatar
Benjamin Baer committed
337
338
.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
339
340
341
342
  background-color: #e72a89;
  border-color: #e72a89;
}

343

344
345
346
/* Error Color Example End 
   Error Soft Example Start */

347
.qfq-notify .has-error .form-control {
348
349
350
  border-width: 1px;
}

351
.qfq-notify .has-error .help-block {
352
  padding-left: 12px;
353
354
355
  border: 0;
  padding: 0 12px;
  background-color: transparent;
Benjamin Baer's avatar
Benjamin Baer committed
356
  color: #ca7a0a;
357
358
}

Benjamin Baer's avatar
Benjamin Baer committed
359
.qfq-notify .has-error .help-block:before {
360
361
362
363
364
  content: "";  /* this is your text. You can also use UTF-8 character codes as I do here */
}

/* ERROR END */

365
366
367
368
.qfq-tinymce-readonly .mce-panel {
  background-color: #eee;
}

Benjamin Baer's avatar
Benjamin Baer committed
369
370
371
.mono-space {
  font-family: "Roboto Mono", "Menlo", "Segoe UI", monospace;
}
372

373
/* inline elements in horizontal mode are too much left */
374
375
376
377
378
379
.form-horizontal {
  .form-inline {
    .form-group {
      margin: 0;
    }
  }
Rafael Ostertag's avatar
Rafael Ostertag committed
380

381
382
  /* reduce unwished padding-top offset */
  .checkbox {
383
    padding-top: 7px;
384
  }
385

386
  .checkbox-inline {
387
    padding-top: 7px;
Benjamin Baer's avatar
Benjamin Baer committed
388
    padding-right: 12px;
389
    margin-top: 0;
390
391
  }

Benjamin Baer's avatar
Benjamin Baer committed
392
393
394
395
  .checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline {
    margin-left: 0;
  }

396
  .radio {
397
    padding-top: 7px;
398
399
400
401
402
  }

  input[type=file] {
    display: inline;
  }
403
404
}

405
406
// select:invalid: Dropdown with 'emptyItemAtStart' and required are grey on form load.
select.qfq-locked:invalid {
407
408
409
  color: #a0a0a0;
}

410
411
412
413
414
.form-inline {
  .control-label {
    font-weight: normal;
  }
}
415

416
417
418
419
.lower-canvas {
  background-color: #fff;
}

420
//.form-group.required.control-label:before{
Benjamin Baer's avatar
Benjamin Baer committed
421
//  color: red;/home/a/bbaer/PhpstormProjects/uzh_cd_template
422
423
424
425
426
//  content: "*";
//  position: absolute;
//  margin-left: -10px;
//}

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

435
436
437
438
439
440
441
442
.required-left:before {
  color: #d00;
  content: "*";
  //position: absolute;
  margin-right: 3px;
  //top: 10px;
}

443
444
445
446
447
448
449
450
451
452
.qfq-table-50 {
  min-width: 50%;
  width: auto;
}

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

453
454
455
456
457
.qfq-table-100 {
  min-width: 100%;
  width: auto;
}

458
.qfq-fieldset {
459
460
  margin-top: 5px;
  margin-bottom: 15px;
461
462
}

Benjamin Baer's avatar
Benjamin Baer committed
463

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

Benjamin Baer's avatar
Benjamin Baer committed
472

473
474
475
476
477
.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
478
479
  border: 1px solid #ccc;
  border-top: none;
480
481
}

482
483
484
485
486
487
.qfq-form-no-title {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border: 1px solid #ccc;
}

488
489
490
491
492
493
494
/* adjust BS padding of input elements: center */
.form-group {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 0;
}

495
496
497
498
499
/* 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
500
.qfq-subrecord-table {
501
  margin-top: -5px;
502
503
  min-width: 100%;
  width: auto;
Benjamin Baer's avatar
Benjamin Baer committed
504
505
}

506
.qfq-form-title {
Benjamin Baer's avatar
Benjamin Baer committed
507
  border: 1px solid #ccc;
508
  border-radius: 4px 4px 0 0;
Benjamin Baer's avatar
Benjamin Baer committed
509
510
  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);
511
  min-height: 45px;
Benjamin Baer's avatar
Benjamin Baer committed
512
  font-size: 1.2em;
513
  padding: 13px 15px;
Benjamin Baer's avatar
Benjamin Baer committed
514
515
516
  font-weight: bold;
}

Benjamin Baer's avatar
Benjamin Baer committed
517
518
519
520
.qfq-table-button-width {
  width: 44px;
}

Benjamin Baer's avatar
Benjamin Baer committed
521
522
523
524
525
526
.qfq-comment-marker {
  position: absolute;
  right: 22px;
  z-index: 2;
}

Benjamin Baer's avatar
Benjamin Baer committed
527
528
529
530
.nav-pills>li>a {
  border-radius: 0;
}

531
532
.qfq-color-white {
  background-color: #ffffff;
533
  border-color: #fff;
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
}

.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
549
  background-color: #e2eeff;
550
551
552
553
554
555
}

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

557
558
559
.qfq-child-margin-top + .qfq-child-margin-top {
  margin-top: 15px;
}
560
561

.qfq-note {
562
  padding-top: 2px;
563
}
564

565
566
567
568
.control-label .small, .control-label small {
  font-weight: normal;
}

569
570
571
572
.label-rebel {
  background-color: #e72a89;
}

Benjamin Baer's avatar
Benjamin Baer committed
573
// Fabric Plugin classes
574

Benjamin Baer's avatar
Benjamin Baer committed
575
576
577
578
579
580
581
582
583
.qfq-fabric-fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100vw;
  height: 100vh;
}

584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
.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
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
.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;
}

618
.color-picker {
619
  margin-top: 2px;
620
621
}

Carsten  Rose's avatar
Carsten Rose committed
622
.color-picker > button {
623
624
625
626
627
628
629
630
631
632
633
634
  margin-right: 2px;
}

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

// Emoji

.emoji {
  display: inline-block;
  border: none;
635
  /*background-color: #fff;*/
636
637
638
639
640
  width: 32px;
  height: 32px;
  margin: 5px;
}

Benjamin Baer's avatar
Benjamin Baer committed
641

642
643
644
645
646
// typeAhead Input: Default Bootstrap column width
.twitter-typeahead {
  display: block !important;
}

647
648
.qfq-cc-style {
  font-size: 0.8em;
649
  color: #777;
Carsten  Rose's avatar
Carsten Rose committed
650
651
652
653
654
  //position: relative;
  //top: -24px;
  //right: 10px;
  //text-align: right;
  //display: block;
655
656
}

657
658
659
660
661
662
663
664
665
666
667
668
669
.qfq-vertical {
  vertical-align: bottom; 
  text-align: center;
}

.qfq-vertical span, .qfq-vertical .qfq-vertical-text {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

670
// TypeAhead Suggestions
671
672
673
674
675
676
677
678
.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);
679
680
681
682
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  width: 100%;
}

Marc Egger's avatar
Marc Egger committed
683
684
685
686
687
// typeAhead tags
span.qfq-typeahead-tag {
  margin-right: 5px;
}

688
689
690
691
692
693
694
695
696
697
698
699
700
@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;
701
702
703
}

.tt-suggestion + .tt-suggestion {
704
705
706
707
708
  padding-top: 6px;
}

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

711
712
713
714
// Workaround as long as rendering of notes can't be specific.
.qfq-note-no-padding {
  margin-top: -7px;
}
715

716
717
718
719
720
721
722
723
// Mit BB anschauen wie man die NOTE Felder formatiert
//
//.text-input {
//  padding-top: 7px;
//}
//
//.text-note {
//  padding-top: 7px;
724
725
726
727
728
//}

.CodeMirror {
  border: 1px solid @CodeMirror_border_color;
  border-radius: 4px;
Carsten  Rose's avatar
Carsten Rose committed
729
730
731
}

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

Benjamin Baer's avatar
Benjamin Baer committed
733
734
735
736
737
738
739
740
741
742
743
744
745
746
/* 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 {
747
748
  font-size: 92px;
  line-height: normal;
Benjamin Baer's avatar
Benjamin Baer committed
749
750
751
  margin: 0.4em;
}

752
753
754
755
756
757
.qfq-icon-gear {
  height: 190px;
  width: 190px;
  margin: 1em;
}

Benjamin Baer's avatar
Benjamin Baer committed
758
.glyphicon-spin {
759
760
  -webkit-animation: spin 2350ms infinite linear;
  animation: spin 2350ms infinite linear;
Benjamin Baer's avatar
Benjamin Baer committed
761
}
Carsten  Rose's avatar
Carsten Rose committed
762

Benjamin Baer's avatar
Benjamin Baer committed
763
764
765
766
767
768
769
770
771
772
@-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
773

Benjamin Baer's avatar
Benjamin Baer committed
774
775
776
777
778
779
780
781
782
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
783
784
}

785
.noclick {
786
  pointer-events: none;
787
}
788

789
790
// Buttons: full width
.qfq-100 {
791
  width: 100%;
792
793
794
795
}

// Buttons: text left aligned
.qfq-left {
796
  text-align: left;
Benjamin Baer's avatar
Benjamin Baer committed
797
798
799
}

.alert-interactive {
800
  position: fixed;
Benjamin Baer's avatar
Benjamin Baer committed
801
802
803
804
  display: box;
  left: 50%;
  transform: translate(-50%,0);
  top: 200px;
805
  max-height: 60%;
Benjamin Baer's avatar
Benjamin Baer committed
806
  padding: 20px;
Carsten  Rose's avatar
Carsten Rose committed
807
  color: #d0d0d0;
808
809
  min-width: 24%;
  max-width: 90%;
Benjamin Baer's avatar
Benjamin Baer committed
810
  border-left: 5px solid;
Carsten  Rose's avatar
Carsten Rose committed
811
  background-color: #333;
812
813
  overflow-y: auto;
  overflow-x: hidden;
Benjamin Baer's avatar
Benjamin Baer committed
814
815
}

Benjamin Baer's avatar
Benjamin Baer committed
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
.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;
831
  z-index: 10000; /* Always on top */
Benjamin Baer's avatar
Benjamin Baer committed
832
833
}

Benjamin Baer's avatar
Benjamin Baer committed
834
835
836
837
838
.border-success {
  border-color: #5cb85c;
}

.border-error {
Carsten  Rose's avatar
Carsten Rose committed
839
  border-color: #fb4f4f;
Benjamin Baer's avatar
Benjamin Baer committed
840
841
842
843
844
845
846
847
848
849
}

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

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

Benjamin Baer's avatar
Benjamin Baer committed
850
851
852
853
854
855
856
857
858
859
860
861
862
863
.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
864
865
866
867
868
869
870
871
.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
872
873
}

874
875
876
877
878
.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
879

Benjamin Baer's avatar
Benjamin Baer committed
880
881
882
// Code Correction

.codeCorrectionWrap {
883
  border: 1px solid #ccc;
Benjamin Baer's avatar
Benjamin Baer committed
884
  border-top: unset;
Benjamin Baer's avatar
Benjamin Baer committed
885
  margin-bottom: 10px;
Benjamin Baer's avatar
Benjamin Baer committed
886
887
}

Benjamin Baer's avatar
Benjamin Baer committed
888
889
890
891
892
893
894
895
.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
896
.qfqLineCount {
897
  user-select: none;
Benjamin Baer's avatar
Benjamin Baer committed
898
  width: 50px;
899
  height: 100%;
Benjamin Baer's avatar
Benjamin Baer committed
900
  text-align: right;
901
902
903
904
905
906
907
908
909
910
  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
911
  padding-right: 15px;
912
913
914
  text-align: left;
  font-size: 1.2em;
  font-family: monospace;
Benjamin Baer's avatar
Benjamin Baer committed
915
  word-break: break-word;
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
}

.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
935
  padding-bottom: 20px;
Benjamin Baer's avatar
Benjamin Baer committed
936
937
}

Benjamin Baer's avatar
Benjamin Baer committed
938
939
940
941
.qfqComment {
  display: grid;
  position: relative;
  grid-template-columns: 110px auto;
Benjamin Baer's avatar
Benjamin Baer committed
942
  grid-template-rows: 30px auto;
Benjamin Baer's avatar
Benjamin Baer committed
943
  margin: 10px;
944
  margin-top: 20px;
Benjamin Baer's avatar
Benjamin Baer committed
945
946
947
}

.qfqCommentAvatar {
948
  background-color: #fff;
Benjamin Baer's avatar
Benjamin Baer committed
949
950
951
  grid-column: 1;
  grid-row-start: 1;
  grid-row-end: 2;
Benjamin Baer's avatar
Benjamin Baer committed
952
  align-self: start;
Benjamin Baer's avatar
Benjamin Baer committed
953
  width: 100px;
954
  height: 120px;
Benjamin Baer's avatar
Benjamin Baer committed
955
  border: 1px solid #ccc;
956
  padding: 4px;
957
  padding-bottom: 20px;
958
  /*transform: rotate(20deg);*/
Benjamin Baer's avatar
Benjamin Baer committed
959
960
961
962
}

.qfqCommentAuthor {
  position: absolute;
963
964
  top: 10px;
  left: 10px;
965
  font-weight: bold;
Benjamin Baer's avatar
Benjamin Baer committed
966
967
968
}

.qfqCommentText {
Benjamin Baer's avatar
Benjamin Baer committed
969
  position: relative;
Benjamin Baer's avatar
Benjamin Baer committed
970
  grid-column: 2;
Benjamin Baer's avatar
Benjamin Baer committed
971
  grid-row: 2;
Benjamin Baer's avatar
Benjamin Baer committed
972
973
  background-color: #fff;
  width: 100%;
Benjamin Baer's avatar
Benjamin Baer committed
974
975
  min-height: 90px;
  height: 100%;
976
  padding: 10px;
Benjamin Baer's avatar
Benjamin Baer committed
977
  padding-bottom: 25px;
Benjamin Baer's avatar
Benjamin Baer committed
978
979
980
981
982
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 5px 5px;
}

Benjamin Baer's avatar
Benjamin Baer committed
983
984
985
986
987
988
989
990
991
.qfqCommentCommands {
  position: absolute;
  bottom: 5px;
  right: 15px;
  width: 100%;
  color: #ccc;
  text-align: right;
}

992
.qfqCommentCommand {
Benjamin Baer's avatar
Benjamin Baer committed
993
  cursor: pointer;
994
  margin-left: 9px;
Benjamin Baer's avatar
Benjamin Baer committed
995
996
}

997
.qfqCommentCommand:hover {
Benjamin Baer's avatar
Benjamin Baer committed
998
999
1000
  color: #9acfea;
}

Benjamin Baer's avatar
Benjamin Baer committed
1001
1002
1003
1004
1005
.qfqCommentTopLine {
  position: relative;
  grid-row: 1;
  grid-column: 2;
  border: 1px solid #ccc;
1006
  border-bottom: none;
Benjamin Baer's avatar
Benjamin Baer committed
1007
1008
1009
1010
1011
1012
  border-radius: 5px 5px 0 0;
  background-color: #fff;
}

.qfqCommentDateTime {
  position: absolute;
1013
1014
  right: 10px;
  top: 10px;
Benjamin Baer's avatar
Benjamin Baer committed
1015
1016
1017
1018
  color: grey;
  font-size: 0.8em;
}

1019
1020
1021
1022
1023
1024
1025
.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
1026
1027
}

1028
.qfqEditor {
1029
1030
  z-index: 1;
  position: relative;
1031
1032
1033
  grid-column: 1;
  width: 100%;
  min-height: 100px;
1034
1035
1036
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
1037
1038
  padding: 10px;
  padding-left: 40px;
1039
1040
1041
1042
1043
1044
}

.qfqEditorControls {
  grid-column: 2;
  width: 100%;
  padding-left: 10px;
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
}

.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
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
}

.qfqSyntaxDoc {
  color: #888;
}

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

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

1093
1094
.qfqDropTarget {
  height: 50px;
Benjamin Baer's avatar
Benjamin Baer committed
1095
  margin: 0;
1096
1097
1098
1099
1100
  border: 1px dashed #ccc;
}

.qfqTargetDisplay {
  border: 1px dashed #25adf1;
1101
1102
}

1103
span.qfq-more-text {
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
  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;
1129
1130
}

1131
1132
1133
1134
// Droplets

.qfq-droplet-container {
  position: absolute;
1135
  border-radius: 6px;
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
  padding: 15px;
}

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

.qfq-droplet-container:after {
  content: ' ';
  position: absolute;
1150
  left: 20px;
1151
1152
  top: -10px;
  border: 5px solid;
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
}

.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 {
1175
  border-color: transparent transparent #25adf1 #25adf1;
1176
1177
1178
1179
}

.qfq-droplet-container.qfq-droplet-blue:before {
  border-color: transparent #25adf1 #25adf1 transparent;
1180
1181
1182
1183
}

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

1186
legend {
Benjamin Baer's avatar
Benjamin Baer committed
1187
1188
  margin-bottom: 25px;
  padding-bottom: 5px;
1189
  font-size: 17px;
1190
1191
}

Benjamin Baer's avatar
Benjamin Baer committed
1192
1193
1194
1195
1196
1197
1198
.qfq-fieldset {
  margin-top: 38px;
}

.qfq-fieldset:first-child {
  margin-top: 15px;
}
Benjamin Baer's avatar
Benjamin Baer committed
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
/* 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
1232
1233
}

1234
1235
1236
1237
1238
1239
.qfq-sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

1240
thead.qfq-sticky th, thead.qfq-sticky td {
1241
  position: -webkit-sticky; /* Safari */
Carsten  Rose's avatar
Carsten Rose committed
1242
1243
1244
  position: sticky;
  top: 0;
  background-color: white;
Benjamin Baer's avatar
Benjamin Baer committed
1245
  z-index: 900;
Carsten  Rose's avatar
Carsten Rose committed
1246
1247
}

1248
thead.qfq-sticky td {
1249
  top: 33px;
Carsten  Rose's avatar
Carsten Rose committed
1250
}
1251
1252

.dropdown-menu {
1253
  z-index: 920;
1254
1255
}

1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
// 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;
}

1283
1284
1285
1286
1287
1288
1289
1290
.qfq-badge-danger {
  background-color: #b94a48;
}

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

1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
.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 {
1308
  background-color: #5bc0de;
1309
1310
1311
}

.qfq-badge-info:hover {
1312
1313
1314
1315
1316
1317
1318
1319
  background-color: #4bb0ce;
}

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

.qfq-badge-primary:hover {
1320
1321
1322
1323
1324
1325
  background-color: #2d6987;
}

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

1327
1328
.qfq-badge-inverse:hover {
  background-color: #1a1a1a;
1329
}