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
}