qfq-bs.css.less 10.9 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
39
40
.alert-buttons {
  margin-top: 10px;
}

41
/* inline elements in horizontal mode are too much left */
42
43
44
45
46
47
.form-horizontal {
  .form-inline {
    .form-group {
      margin: 0;
    }
  }
Rafael Ostertag's avatar
Rafael Ostertag committed
48

49
50
  /* reduce unwished padding-top offset */
  .checkbox {
51
    padding-top: 7px;
52
  }
53

54
  .checkbox-inline {
55
56
    padding-top: 7px;
    margin-top: 0;
57
58
59
  }

  .radio {
60
    padding-top: 7px;
61
62
63
  }

  .radio-inline {
64
65
    padding-top: 7px;
    margin-top: 0px;
66
67
68
69
70
  }

  input[type=file] {
    display: inline;
  }
71
72
}

73
74
// select:invalid: Dropdown with 'emptyItemAtStart' and required are grey on form load.
select.qfq-locked:invalid {
75
76
77
  color: #a0a0a0;
}

78
79
80
81
82
.form-inline {
  .control-label {
    font-weight: normal;
  }
}
83

84
85
86
87
.lower-canvas {
  background-color: #fff;
}

88
89
90
91
92
93
94
95
96
97
//.form-group.required.control-label:before{
//  color: red;
//  content: "*";
//  position: absolute;
//  margin-left: -10px;
//}

.required-field:after {
  color: #d00;
  content: "*";
98
  //position: absolute;
99
  margin-left: 3px;
100
  //top: 10px;
101
102
}

103
104
105
106
107
108
109
110
111
112
.qfq-table-50 {
  min-width: 50%;
  width: auto;
}

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

113
114
115
116
117
.qfq-table-100 {
  min-width: 100%;
  width: auto;
}

Benjamin Baer's avatar
Benjamin Baer committed
118

119
.qfq-form-pill {
Benjamin Baer's avatar
Benjamin Baer committed
120
  /*
121
  border-top-right-radius: 4px;
Benjamin Baer's avatar
Benjamin Baer committed
122
123
124
  border-top-left-radius: 4px; */
  border: 1px solid #ccc;
  border-top: none;
125
126
}

Benjamin Baer's avatar
Benjamin Baer committed
127

128
129
130
131
132
.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
133
134
  border: 1px solid #ccc;
  border-top: none;
135
136
137
138
139
140
141
142
143
}

/* adjust BS padding of input elements: center */
.form-group {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 0;
}

144
145
146
147
148
/* 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
149
.qfq-subrecord-table {
150
  margin-top: 0;
Benjamin Baer's avatar
Benjamin Baer committed
151
152
}

153
.qfq-form-title {
Benjamin Baer's avatar
Benjamin Baer committed
154
  border: 1px solid #ccc;
155
  border-radius: 4px 4px 0 0;
Benjamin Baer's avatar
Benjamin Baer committed
156
157
  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);
158
  min-height: 45px;
Benjamin Baer's avatar
Benjamin Baer committed
159
  font-size: 1.2em;
160
  padding: 13px 15px;
Benjamin Baer's avatar
Benjamin Baer committed
161
162
163
  font-weight: bold;
}

Benjamin Baer's avatar
Benjamin Baer committed
164
165
166
167
.qfq-table-button-width {
  width: 44px;
}

Benjamin Baer's avatar
Benjamin Baer committed
168
169
170
171
.nav-pills>li>a {
  border-radius: 0;
}

172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
.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
189
  background-color: #e2eeff;
190
191
192
193
194
195
}

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

197
198
199
.qfq-child-margin-top + .qfq-child-margin-top {
  margin-top: 15px;
}
200
201
202
203

.qfq-note {
  padding-top: 7px;
}
204

205
206
207
208
.control-label .small, .control-label small {
  font-weight: normal;
}

Benjamin Baer's avatar
Benjamin Baer committed
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
// Fabric Plugin classes
.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;
}

228
229
230
231
.color-picker {
  margin-top: 5px;
}

Carsten  Rose's avatar
Carsten Rose committed
232
.color-picker > button {
233
234
235
236
237
238
239
240
241
242
243
244
  margin-right: 2px;
}

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

// Emoji

.emoji {
  display: inline-block;
  border: none;
245
  /*background-color: #fff;*/
246
247
248
249
250
  width: 32px;
  height: 32px;
  margin: 5px;
}

Benjamin Baer's avatar
Benjamin Baer committed
251

252
253
254
255
256
// typeAhead Input: Default Bootstrap column width
.twitter-typeahead {
  display: block !important;
}

257
258
.qfq-cc-style {
  font-size: 0.8em;
259
  color: #777;
Carsten  Rose's avatar
Carsten Rose committed
260
261
262
263
264
  //position: relative;
  //top: -24px;
  //right: 10px;
  //text-align: right;
  //display: block;
265
266
}

267
// TypeAhead Suggestions
268
269
270
271
272
273
274
275
.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);
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
  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;
293
294
295
}

.tt-suggestion + .tt-suggestion {
296
297
298
299
300
  padding-top: 6px;
}

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

303
304
305
306
// Workaround as long as rendering of notes can't be specific.
.qfq-note-no-padding {
  margin-top: -7px;
}
307

308
309
310
311
312
313
314
315
// Mit BB anschauen wie man die NOTE Felder formatiert
//
//.text-input {
//  padding-top: 7px;
//}
//
//.text-note {
//  padding-top: 7px;
316
317
318
319
320
//}

.CodeMirror {
  border: 1px solid @CodeMirror_border_color;
  border-radius: 4px;
Carsten  Rose's avatar
Carsten Rose committed
321
322
323
}

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

Benjamin Baer's avatar
Benjamin Baer committed
325
326
327
328
329
330
331
332
333
334
335
336
337
338
/* 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 {
339
340
  font-size: 92px;
  line-height: normal;
Benjamin Baer's avatar
Benjamin Baer committed
341
342
343
  margin: 0.4em;
}

344
345
346
347
348
349
.qfq-icon-gear {
  height: 190px;
  width: 190px;
  margin: 1em;
}

Benjamin Baer's avatar
Benjamin Baer committed
350
.glyphicon-spin {
351
352
  -webkit-animation: spin 2350ms infinite linear;
  animation: spin 2350ms infinite linear;
Benjamin Baer's avatar
Benjamin Baer committed
353
}
Carsten  Rose's avatar
Carsten Rose committed
354

Benjamin Baer's avatar
Benjamin Baer committed
355
356
357
358
359
360
361
362
363
364
@-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
365

Benjamin Baer's avatar
Benjamin Baer committed
366
367
368
369
370
371
372
373
374
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
375
376
}

377
.noclick {
378
  pointer-events: none;
379
}
380

381
382
// Buttons: full width
.qfq-100 {
383
  width: 100%;
384
385
386
387
}

// Buttons: text left aligned
.qfq-left {
388
  text-align: left;
Benjamin Baer's avatar
Benjamin Baer committed
389
390
391
}

.alert-interactive {
392
  position: fixed;
Benjamin Baer's avatar
Benjamin Baer committed
393
394
395
396
  display: box;
  left: 50%;
  transform: translate(-50%,0);
  top: 200px;
397
  max-height: 60%;
Benjamin Baer's avatar
Benjamin Baer committed
398
399
  padding: 20px;
  color: #d0d0d0;
400
401
  min-width: 24%;
  max-width: 90%;
Benjamin Baer's avatar
Benjamin Baer committed
402
403
  border-left: 5px solid;
  background-color: #333;
404
405
  overflow-y: auto;
  overflow-x: hidden;
Benjamin Baer's avatar
Benjamin Baer committed
406
407
}

Benjamin Baer's avatar
Benjamin Baer committed
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
.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;
423
  z-index: 10000; /* Always on top */
Benjamin Baer's avatar
Benjamin Baer committed
424
425
}

Benjamin Baer's avatar
Benjamin Baer committed
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
.border-success {
  border-color: #5cb85c;
}

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

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

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

.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
450
451
}

Benjamin Baer's avatar
Benjamin Baer committed
452

Benjamin Baer's avatar
Benjamin Baer committed
453
454
455
// Code Correction

.codeCorrectionWrap {
456
  border: 1px solid #ccc;
Benjamin Baer's avatar
Benjamin Baer committed
457
  border-top: unset;
Benjamin Baer's avatar
Benjamin Baer committed
458
459
}

Benjamin Baer's avatar
Benjamin Baer committed
460
461
462
463
464
465
466
467
.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
468
469
.qfqLineCount {
  width: 50px;
470
  height: 100%;
Benjamin Baer's avatar
Benjamin Baer committed
471
  text-align: right;
472
473
474
475
476
477
478
479
480
481
  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
482
  padding-right: 15px;
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
  text-align: left;
  font-size: 1.2em;
  font-family: monospace;
}

.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
505
  padding-bottom: 20px;
Benjamin Baer's avatar
Benjamin Baer committed
506
507
}

Benjamin Baer's avatar
Benjamin Baer committed
508
509
510
511
.qfqComment {
  display: grid;
  position: relative;
  grid-template-columns: 110px auto;
Benjamin Baer's avatar
Benjamin Baer committed
512
  grid-template-rows: 30px auto;
Benjamin Baer's avatar
Benjamin Baer committed
513
  margin: 10px;
514
  margin-top: 20px;
Benjamin Baer's avatar
Benjamin Baer committed
515
516
517
}

.qfqCommentAvatar {
518
  background-color: #fff;
Benjamin Baer's avatar
Benjamin Baer committed
519
520
521
  grid-column: 1;
  grid-row-start: 1;
  grid-row-end: 2;
Benjamin Baer's avatar
Benjamin Baer committed
522
  align-self: start;
Benjamin Baer's avatar
Benjamin Baer committed
523
  width: 100px;
524
  height: 120px;
Benjamin Baer's avatar
Benjamin Baer committed
525
  border: 1px solid #ccc;
526
  padding: 4px;
527
  padding-bottom: 20px;
528
  /*transform: rotate(20deg);*/
Benjamin Baer's avatar
Benjamin Baer committed
529
530
531
532
}

.qfqCommentAuthor {
  position: absolute;
533
534
  top: 10px;
  left: 10px;
535
  font-weight: bold;
Benjamin Baer's avatar
Benjamin Baer committed
536
537
538
}

.qfqCommentText {
Benjamin Baer's avatar
Benjamin Baer committed
539
  position: relative;
Benjamin Baer's avatar
Benjamin Baer committed
540
  grid-column: 2;
Benjamin Baer's avatar
Benjamin Baer committed
541
  grid-row: 2;
Benjamin Baer's avatar
Benjamin Baer committed
542
543
  background-color: #fff;
  width: 100%;
Benjamin Baer's avatar
Benjamin Baer committed
544
545
  min-height: 90px;
  height: 100%;
546
  padding: 10px;
Benjamin Baer's avatar
Benjamin Baer committed
547
  padding-bottom: 25px;
Benjamin Baer's avatar
Benjamin Baer committed
548
549
550
551
552
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 5px 5px;
}

Benjamin Baer's avatar
Benjamin Baer committed
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
.qfqCommentCommands {
  position: absolute;
  bottom: 5px;
  right: 15px;
  width: 100%;
  color: #ccc;
  text-align: right;
}

.qfqCommentReply {
  cursor: pointer;
}

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

Benjamin Baer's avatar
Benjamin Baer committed
570
571
572
573
574
.qfqCommentTopLine {
  position: relative;
  grid-row: 1;
  grid-column: 2;
  border: 1px solid #ccc;
575
  border-bottom: none;
Benjamin Baer's avatar
Benjamin Baer committed
576
577
578
579
580
581
  border-radius: 5px 5px 0 0;
  background-color: #fff;
}

.qfqCommentDateTime {
  position: absolute;
582
583
  right: 10px;
  top: 10px;
Benjamin Baer's avatar
Benjamin Baer committed
584
585
586
587
  color: grey;
  font-size: 0.8em;
}

588
589
590
591
592
593
594
.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
595
596
}

597
.qfqEditor {
598
599
  z-index: 1;
  position: relative;
600
601
602
  grid-column: 1;
  width: 100%;
  min-height: 100px;
603
604
605
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
606
607
  padding: 10px;
  padding-left: 40px;
608
609
610
611
612
613
}

.qfqEditorControls {
  grid-column: 2;
  width: 100%;
  padding-left: 10px;
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
}

.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
647
648
649
650
651
652
653
654
655
656
657
658
659
}

.qfqSyntaxDoc {
  color: #888;
}

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

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

662
663
664
665
666
667
668
669
.qfqDropTarget {
  height: 50px;
  margin: 1px;
  border: 1px dashed #ccc;
}

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