Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
@import "compass/css3/border-radius";
2 
@import "compass/css3/box-shadow";
3 
@import "compass/css3/opacity";
4 
@import "compass/css3/text-shadow";
5 
@import "compass/css3/transition";
6 
@import "compass/css3/transform";
7 
 
8 
@import "variables";
9 
@import "mixins";
10 
@import "utils";
11 
@import "form-field";
12 
@import "form-groups";
13 
@import "h5peditor-image-edit";
14 
@import "h5peditor-image-edit-popup";
15 
@import "deprecated";
16 
 
17 
html, body {
18 
  margin: 0;
19 
  padding: 0;
20 
  color: $text-color;
21 
  font-family: $font-family;
22 
  max-width: 960px;
23 
  position: relative;
24 
}
25 
a {
26 
  text-decoration: none;
27 
}
28 
 
29 
.h5peditor {
30 
  font-size: 16px;
31 
 
32 
  .h5p-more-libraries {
33 
    font-size: 0.875em;
34 
    margin-top: 0.4em;
35 
  }
36 
  .h5peditor-single > .field.library {
37 
    border: 0;
38 
    padding: 0;
39 
  }
40 
  .cke_dialog_background_cover {
41 
    width: 100% !important;
42 
    height: 100% !important;
43 
  }
44 
 
45 
  .errors p,
46 
  .h5p-errors {
47 
    color: #da0001;
48 
    white-space: normal;
49 
  }
50 
  textarea {
51 
    resize: vertical;
52 
  }
53 
 
54 
  .h5p-editor-flex-wrapper {
55 
    display: flex;
56 
    flex-direction: row;
57 
  }
58 
 
59 
  .h5peditor-label-wrapper {
60 
    display: flex;
61 
    flex-direction: row;
62 
  }
63 
 
64 
  .has-important-description {
65 
    .h5peditor-field-description {
66 
      display: none;
67 
    }
68 
    .h5peditor-label-wrapper {
69 
      float: left;
70 
    }
71 
  }
72 
 
73 
  .important-description-visible {
74 
    .h5peditor-field-important-description {
75 
      display: block;
76 
    }
77 
    .h5peditor-label-wrapper {
78 
      float: none;
79 
    }
80 
    .important-description-show {
81 
      display: none;
82 
    }
83 
  }
84 
 
85 
  textarea,
86 
  .h5peditor-text,
87 
  .ckeditor {
88 
    @include box-shadow($form-input-box-shadow);
89 
    box-sizing: border-box;
90 
    margin: 0;
91 
    padding: $min-padding;
92 
    min-height: 40px;
93 
    border: 1px solid $form-border-color;
94 
    background: $form-input-color;
95 
    outline: none;
96 
    font-size: 16px;
97 
    word-wrap: break-word;
98 
 
99 
    &.error {
100 
      border-color: red;
101 
    }
102 
  }
103 
  .h5peditor-text, textarea {
104 
    width: 100%;
105 
    box-sizing: border-box;
106 
 
107 
    &.error {
108 
      border-color: red;
109 
    }
110 
  }
111 
  /* Placeholders - need to be on separate lines. If not,
112 
     the browsers will invalidate them */
113 
  textarea:focus::-webkit-input-placeholder,
114 
  input:focus::-webkit-input-placeholder {
115 
    color: $form-input-focus-placeholder-color;
116 
  }
117 
  textarea:focus:-moz-placeholder,
118 
  input:focus:-moz-placeholder {
119 
    color: $form-input-focus-placeholder-color;
120 
  }
121 
  textarea:focus::-moz-placeholder,
122 
  input:focus::-moz-placeholder {
123 
    color: $form-input-focus-placeholder-color;
124 
  }
125 
  textarea:focus:-ms-input-placeholder,
126 
  input:focus:-ms-input-placeholder {
127 
    color: $form-input-focus-placeholder-color;
128 
  }
129 
  textarea:focus.h5peditor-ckeditor-placeholder,
130 
  input:focus.h5peditor-ckeditor-placeholder {
131 
    color: $form-input-focus-placeholder-color;
132 
  }
133 
 
134 
  ::-webkit-input-placeholder {
135 
    color: $form-input-placeholder-color;
136 
  }
137 
  :-moz-placeholder {
138 
    color: $form-input-placeholder-color;
139 
  }
140 
  ::-moz-placeholder {
141 
    color: $form-input-placeholder-color;
142 
  }
143 
  :-ms-input-placeholder {
144 
    color: $form-input-placeholder-color;
145 
  }
146 
  .h5peditor-ckeditor-placeholder {
147 
    color: $form-input-placeholder-color;
148 
  }
149 
  & > select,
150 
  .h5peditor-language-switcher select,
151 
  h5peditor-select,
152 
  .field > select {
153 
    padding: 10px 30px 10px 8px;
154 
    font-family: $font-family;
155 
    font-size: 16px;
156 
    border: 1px solid $form-border-color;
157 
    background: $form-input-color inline-image('down.png') no-repeat;
158 
    background-position: calc(100% - 10px);
159 
    @include box-shadow($form-input-box-shadow);
160 
    -moz-appearance: none;
161 
    -webkit-appearance: none;
162 
 
163 
    &:disabled {
164 
      background-color: #efefef;
165 
    }
166 
  }
167 
  & > select {
168 
    margin-bottom: 13px;
169 
    margin-right: 20px;
170 
  }
171 
  select::-ms-expand {
172 
    display: none;
173 
  }
174 
  a:focus {
175 
    outline: none;
176 
  }
177 
  textarea:focus,
178 
  .h5peditor-text:focus {
179 
    outline: none;
180 
    background-color: $white;
181 
    border-color: #53a0ff;
182 
  }
183 
  .h5p-ul {
184 
    padding: 0;
185 
    margin: 0;
186 
    list-style: none;
187 
 
188 
    .h5p-li {
189 
      @include field-margin($min-padding);
190 
      padding: 0;
191 
      list-style: none;
192 
 
193 
      &.placeholder {
194 
        box-sizing: border-box;
195 
        background: #e8f2fa;
196 
        border: dashed 2px #2782d1;
197 
      }
198 
 
199 
      &:hover {
200 
        text-decoration: none;
201 
      }
202 
 
203 
      &:nth-child(2).moving {
204 
        margin-top: 0;
205 
      }
206 
 
207 
      &:nth-last-child(2).placeholder {
208 
        margin-bottom: 0;
209 
      }
210 
    }
211 
  }
212 
  .dimensions input, .coordinates input, .number input {
213 
    width: 75px;
214 
  }
215 
  .number input[type="range"] {
216 
    width: 300px;
217 
    float: left;
218 
    margin: 7px 8px 0 0;
219 
  }
220 
  .h5p-errors {
221 
    clear: both;
222 
  }
223 
  .h5p-add-file {
224 
    float: left;
225 
    position: relative;
226 
    background: transparent;
227 
    border: 2px dashed #dddddd;
228 
    color: #dddddd;
229 
    margin: 0.5em;
230 
    width: 6em;
231 
    height: 4.5em;
232 
    cursor: pointer;
233 
    outline: none;
234 
    box-sizing: border-box;
235 
    -moz-box-sizing: border-box;
236 
 
237 
    &:focus,
238 
    &:hover {
239 
      color: #999;
240 
      border-color: #999;
241 
    }
242 
 
243 
    &.hidden {
244 
      visibility: hidden;
245 
    }
246 
  }
247 
 
248 
  .h5p-add-file:after {
249 
    position: absolute;
250 
    content: "+";
251 
    font-size: 2em;
252 
    line-height: 2.2em;
253 
    width: 100%;
254 
    height: 100%;
255 
    text-align: center;
256 
  }
257 
  .h5p-add-dialog {
258 
    position: absolute;
259 
    z-index: 1;
260 
    visibility: hidden;
261 
    opacity: 0;
262 
    background: #fff;
263 
    left: 1em;
264 
    right: 1em;
265 
    top: 1em;
266 
    border: 1px solid #cdcdcd;
267 
    box-sizing: border-box;
268 
    -moz-box-sizing: border-box;
269 
    @include box-shadow(0 0 8px #666);
270 
    @include transition(visibility 0s 0.2s, opacity 0.2s);
271 
 
272 
    &.h5p-open {
273 
      visibility: visible;
274 
      opacity: 1;
275 
      @include transition(visibility 0s 0s, opacity 0.2s);
276 
    }
277 
 
278 
    .h5p-add-dialog-table {
279 
      overflow: hidden;
280 
 
281 
      .av-tablist {
282 
        overflow: hidden;
283 
        margin: 1em 1em 0 1em;
284 
      }
285 
 
286 
      .av-tab {
287 
        cursor: pointer;
288 
        float: left;
289 
        padding: 0.5em 0.75em;
290 
        border-top: 1px solid #ccc;
291 
        border-right: 1px solid #ccc;
292 
        font-weight: bold;
293 
        font-size: 15px;
294 
        color: #666;
295 
        background: #f5f5f5;
296 
 
297 
        &:first-child {
298 
          border-left: 1px solid #ccc;
299 
        }
300 
        &.selected {
301 
          color: #333;
302 
          background: #fff;
303 
        }
304 
      }
305 
 
306 
      .av-tabpanel {
307 
        border: 1px solid #ccc;
308 
        margin: 0 1em 1em 1em;
309 
        overflow: hidden;
310 
        padding: 1em;
311 
 
312 
        h3 {
313 
          margin: 0 0 1em 0;
314 
        }
315 
        .h5p-file-drop-upload {
316 
          width: 90px;
317 
          margin: 0;
318 
        }
319 
      }
320 
 
321 
 
322 
      .h5p-dialog-box {
323 
        float: left;
324 
        padding: 0;
325 
        width: 60%;
326 
        margin-right: 5%;
327 
        margin-left: 4%;
328 
        text-align: left;
329 
        margin-top: 30px;
330 
 
331 
        &:first-child {
332 
          width: 22%;
333 
          margin-left: 3%;
334 
          margin-right: 1%;
335 
 
336 
          h3 {
337 
            text-align: center;
338 
          }
339 
        }
340 
      }
341 
 
342 
      h3 {
343 
        color: #666;
344 
        font-size: 1em;
345 
        margin: 1.2em 0;
346 
        line-height: 1.1em;
347 
      }
348 
 
349 
      .h5peditor-field-description {
350 
        color: #bbb;
351 
      }
352 
 
353 
      .h5p-file-url-wrapper {
354 
        background-color: #f5f5f5;
355 
        border: 1px solid #bbb;
356 
        padding: 15px 15px 15px 60px;
357 
        position: relative;
358 
 
359 
        &:before {
360 
          font-family: 'H5P';
361 
          position: absolute;
362 
          left: 0;
363 
          top: 0.083em;
364 
          font-size: 3.8em;
365 
          line-height: 1;
366 
        }
367 
 
368 
        &.video:before {
369 
          content: "\e904";
370 
          color: #dd0505;
371 
        }
372 
 
373 
        &.audio:before {
374 
          content: "\e913";
375 
          color: #747275;
376 
        }
377 
 
378 
        input {
379 
          border-color: #bbb;
380 
          text-align: left;
381 
          padding-left: 20px;
382 
        }
383 
      }
384 
 
385 
      .h5p-file-drop-upload {
386 
        position: relative;
387 
        width: 70%;
388 
        height: 90px;
389 
        margin: 0 15%;
390 
        float: left;
391 
        background-color: #f5f5f5;
392 
        text-align: center;
393 
        cursor: pointer;
394 
        border: 1px solid #bbb;
395 
 
396 
        .h5p-file-drop-upload-inner {
397 
          border: 2px dashed #bbb;
398 
          background-color: white;
399 
          position: absolute;
400 
          top: 3px;
401 
          bottom: 3px;
402 
          left: 3px;
403 
          right: 3px;
404 
 
405 
          &:after {
406 
            font-family: "H5P";
407 
            line-height: 1.4em;
408 
            font-size: 3.5em;
409 
            color: #bbb;
410 
          }
411 
 
412 
          &.video:after {
413 
            content: "\e903";
414 
          }
415 
 
416 
          &.audio:after {
417 
            content: "\e914";
418 
          }
419 
        }
420 
 
421 
        &:hover,
422 
        &.over {
423 
          .h5p-file-drop-upload-inner:after {
424 
            color: #999;
425 
          }
426 
        }
427 
      }
428 
 
429 
      .h5p-or-vertical {
430 
        float: left;
431 
        position: relative;
432 
        width: 5%;
433 
        height: 250px;
434 
      }
435 
    }
436 
 
437 
    .h5p-dialog-box {
438 
      text-align: center;
439 
      padding: 1em 0.5em;
440 
    }
441 
 
442 
    .h5p-buttons {
443 
      padding: 0.5em;
444 
      border-top: 1px solid #cdcdcd;
445 
      background: #ddd;
446 
      text-align: right;
447 
    }
448 
  }
449 
  .h5p-or {
450 
    border-bottom: 1px solid #cdcdcd;
451 
    padding: 0;
452 
    margin: 0 1em;
453 
    text-align: center;
454 
    height: 0.5em;
455 
    line-height: 1em;
456 
    & > span {
457 
      background: #fff;
458 
      padding: 0 0.5em;
459 
    }
460 
  }
461 
 
462 
  .h5p-or-vertical {
463 
    float: left;
464 
    position: relative;
465 
    width: 50px;
466 
    height: 80px;
467 
 
468 
    .h5p-or-vertical-line {
469 
      position: absolute;
470 
      margin: 10px 0;
471 
      left: 49%;
472 
      top: 0;
473 
      bottom: 0;
474 
      width: 1px;
475 
      background: #ccc;
476 
      z-index: 1;
477 
    }
478 
    .h5p-or-vertical-word-wrapper {
479 
      text-align: center;
480 
      height: 18px;
481 
      position: absolute;
482 
      left: 0;
483 
      right: 0;
484 
      top: 22%;
485 
      margin-top: -12px;
486 
      z-index: 2;
487 
 
488 
      .h5p-or-vertical-word {
489 
        color: #999;
490 
        font-weight: bold;
491 
        font-size: 18px;
492 
        padding: 3px;
493 
        background: #fff;
494 
      }
495 
    }
496 
  }
497 
 
498 
  .h5p-file-url {
499 
    text-align: center;
500 
  }
501 
  .h5p-thumbnail {
502 
    margin: 0.5em;
503 
    width: 6em;
504 
    height: 4.5em;
505 
    display: block;
506 
    float: left;
507 
    position: relative;
508 
    @include box-shadow(0 0 10px 0 #666666);
509 
    border: 1px solid #fff;
510 
    box-sizing: border-box;
511 
    -moz-box-sizing: border-box;
512 
 
513 
    .h5p-remove {
514 
      position: absolute;
515 
      top: 0;
516 
      right: 0;
517 
      cursor: pointer;
518 
      outline: none;
519 
      width: 1.6em;
520 
      height: 1.6em;
521 
      line-height: 1.6em;
522 
      overflow: hidden;
523 
      text-indent: -0.4em;
524 
      padding: 0.065em;
525 
      @include opacity(0.6);
526 
    }
527 
    .h5p-remove:hover,
528 
    .h5p-remove:focus {
529 
      @include opacity(1);
530 
    }
531 
    .h5p-remove:after {
532 
      font-family: $icon-font-family;
533 
      font-size: 2em;
534 
      color: #fff;
535 
      content: "\e890";
536 
      @include opacity(0.6);
537 
    }
538 
  }
539 
  .h5p-type {
540 
    position: absolute;
541 
    width: 100%;
542 
    height: 100%;
543 
    font-size: 1.1em;
544 
    line-height: 4em;
545 
    display: block;
546 
    text-align: center;
547 
    background: #000;
548 
    color: #fff;
549 
    cursor: pointer;
550 
  }
551 
  .file {
552 
    position: relative;
553 
    float: left;
554 
    margin-bottom: 0;
555 
    max-width: 100%;
556 
 
557 
    &.authorList {
558 
      float: none;
559 
    }
560 
 
561 
    &.field {
562 
      float: none;
563 
    }
564 
    .thumbnail {
565 
      display: inline-block;
566 
      margin: 10px 10px 10px 0;
567 
      @include box-shadow(0 0 10px 0 #666666);
568 
      border: 1px solid #fff;
569 
      cursor: pointer;
570 
      max-width: 100%;
571 
      min-width: 1em;
572 
      min-height: 1em;
573 
      background: $form-input-color inline-image('transparent-background.png') repeat;
574 
    }
575 
    .thumbnail:focus {
576 
      @include box-shadow(0 0 10px 0 #222);
577 
    }
578 
    .add {
579 
      display: inline-block;
580 
      cursor: pointer;
581 
      padding: 0.5em 1.5em 0.5em 3em;
582 
      background: linear-gradient(to bottom, #fbfbfb 0, #f2f2f2 100%);
583 
      border: 1px solid #d0d0d1;
584 
      border-radius: 0.25em;
585 
      color: #222222;
586 
      font-weight: bold;
587 
      line-height: normal;
588 
 
589 
      &:hover {
590 
        background: #ededed;
591 
      }
592 
 
593 
      &:focus {
594 
        box-shadow: 0 0 16px 0 rgba(133,188,255,0.84);
595 
      }
596 
 
597 
      .h5peditor-field-file-upload-text:before {
598 
        font-family: $icon-font-family;
599 
        content: "\e902";
600 
        line-height: 1;
601 
        color: #39c943;
602 
        font-size: 2em;
603 
        position: absolute;
604 
        left: 0.3em;
605 
        top: 0.1em;
606 
      }
607 
    }
608 
    .remove {
609 
      display: block;
610 
      position: absolute;
611 
      top: 7px;
612 
      right: 7px;
613 
      cursor: pointer;
614 
    }
615 
    .remove:focus:before {
616 
      @include opacity(1);
617 
    }
618 
    .remove:before {
619 
      font-family: $icon-font-family;
620 
      font-size: 1.4em;
621 
      color: #fff;
622 
      content: "\e890";
623 
      @include opacity(0.6);
624 
      @include text-shadow(rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px);
625 
    }
626 
    .remove:hover {
627 
      text-decoration: none;
628 
    }
629 
    .remove:hover:before {
630 
      color: #fff;
631 
      @include opacity(1);
632 
      @include text-shadow(rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px);
633 
    }
634 
    img {
635 
      max-width: 100%;
636 
      vertical-align: bottom;
637 
      max-height: 100px;
638 
    }
639 
 
640 
    .h5p-av-row {
641 
      overflow: auto;
642 
      margin-bottom: 0.5em;
643 
 
644 
      .h5p-thumbnail {
645 
        display: table-cell;
646 
      }
647 
 
648 
      .h5p-video-quality {
649 
        display: table-cell;
650 
        overflow: hidden;
651 
        width: 10000px;
652 
        padding-left: 1em;
653 
 
654 
        input.h5peditor-text {
655 
          width: 100%;
656 
        }
657 
      }
658 
    }
659 
 
660 
    .h5p-av-cell {
661 
      overflow: auto;
662 
      float: left;
663 
    }
664 
  }
665 
  .video .file, .audio .file {
666 
    position: static;
667 
    overflow: visible;
668 
 
669 
    .thumbnail, .add {
670 
      float: left;
671 
    }
672 
    .add {
673 
      margin-top: 8px;
674 
    }
675 
    .thumbnail {
676 
      overflow: visible;
677 
      position: relative;
678 
      cursor: auto;
679 
    }
680 
    .remove {
681 
      top: -3px;
682 
      right: -5px;
683 
    }
684 
    .type {
685 
      padding: 16px 8px 4px;
686 
      background: #000;
687 
      color: #fff;
688 
      font-size: 10px;
689 
    }
690 
    .h5peditor-uploading {
691 
      float: left;
692 
      margin: 0.5em;
693 
    }
694 
  }
695 
  .libwrap {
696 
    margin-top: $padding;
697 
 
698 
    &.no-margin,
699 
    &:empty {
700 
      margin-top: 0;
701 
    }
702 
  }
703 
  input[type="checkbox"] {
704 
    margin: 4px 4px 4px 0;
705 
    vertical-align: bottom;
706 
  }
707 
  .moving {
708 
    position: absolute;
709 
    z-index: 1;
710 
    @include opacity(0.8);
711 
    -webkit-transform: translateZ(0);
712 
 
713 
    .h5peditor-label {
714 
      cursor: grabbing;
715 
      cursor: -moz-grabbing;
716 
      cursor: -webkit-grabbing;
717 
    }
718 
  }
719 
 
720 
  .h5peditor-uploading, .h5peditor-loading {
721 
    padding-top: 10px;
722 
    padding-bottom: 6px;
723 
    font-size: 14px;
724 
  }
725 
  .h5peditor-loading {
726 
    padding: 0.875em 0 1em 3.25em;
727 
    font-style: italic;
728 
  }
729 
 
730 
  .h5p-copyright-button {
731 
    @include border-radius(0.25em);
732 
    height: 30px;
733 
    background: linear-gradient(to bottom, #fff 0, #f2f2f2 100%);
734 
    border: 1px solid $form-border-color;
735 
    color: $black;
736 
    font-size: $font-size-small;
737 
    line-height: $form-item-height-small;
738 
    padding-right: $padding;
739 
    padding-left: 0;
740 
    clear: both;
741 
    font-weight: normal;
742 
 
743 
    &:before {
744 
      font-family: $icon-font-family;
745 
      content: "\e88f";
746 
      color: #666;
747 
      padding: 0 0.25em 0 0.25em;
748 
      vertical-align: middle;
749 
      font-size: 1.5em;
750 
      line-height: 0.9;
751 
    }
752 
 
753 
    &:hover:not([disabled]) {
754 
      background: linear-gradient(to bottom, #fff 0, #d0d0d1 100%);
755 
      text-decoration: none;
756 
      border-color: #999;
757 
    }
758 
  }
759 
 
760 
  .h5p-copyright-button:focus {
761 
    box-shadow: 0 0 16px 0 rgba(133, 188, 255, 0.84);
762 
  }
763 
 
764 
  /* Copyright button for video & audio */
765 
  .field.file > .h5p-copyright-button,
766 
  .field.video > .h5p-copyright-button,
767 
  .field.audio > .h5p-copyright-button {
768 
    float: left;
769 
  }
770 
 
771 
  .h5p-editor-dialog {
772 
    position: absolute;
773 
    z-index: 2;
774 
    margin: 5.5em 0 1em;
775 
    visibility: hidden;
776 
    opacity: 0;
777 
    height: 0;
778 
    overflow: hidden;
779 
    background: #fff;
780 
    @include box-shadow(0 0 8px #666);
781 
    @include transition(visibility 0s 0.2s, height 0s 0.2s, opacity 0.2s, margin-top 0.2s);
782 
 
783 
    &.h5p-open {
784 
      margin-top: 3.5em;
785 
      visibility: visible;
786 
      opacity: 1;
787 
      height: auto;
788 
      @include transition(visibility 0s 0s, height 0s 0s, opacity 0.2s, margin-top 0.2s);
789 
    }
790 
 
791 
    & > .field {
792 
      margin: 0;
793 
      border: 0;
794 
      box-shadow: none;
795 
    }
796 
 
797 
    .content {
798 
      border: none;
799 
      background: $white;
800 
 
801 
      .h5peditor-label {
802 
        font-size: $font-size-large;
803 
        font-weight: 600;
804 
      }
805 
    }
806 
 
807 
    .h5p-close {
808 
      color: #494949;
809 
 
810 
      &:before {
811 
        font-size: 2em;
812 
        right: -0.125em;
813 
        top: 0;
814 
        position: absolute;
815 
        z-index: 1;
816 
        font-family: $icon-font-family;
817 
        content: "\e894";
818 
        line-height: 1em;
819 
        @include transition(scale 0.2s);
820 
      }
821 
 
822 
      &:hover:before {
823 
        @include scale(1.1, 1.1);
824 
      }
825 
    }
826 
  }
827 
 
828 
  .h5p-li > .content > .library {
829 
    border: 0;
830 
    padding: 0;
831 
  }
832 
}
833 
 
834 
.h5p-editor-dialog.h5p-dialog-wide {
835 
  width: 90%;
836 
  border-radius: 0.208em;
837 
}
838 
 
839 
/* Placed this outside of .h5peditor context above. Don't want it to be more
840 
   specific than neccessary (because of overriding) */
841 
.h5peditor-button-textual {
842 
  @include border-radius(0.25em);
843 
  @include button-background(
844 
    $form-item-importance-medium-background,
845 
    $form-item-importance-medium-background-highlight);
846 
  display: inline-block;
847 
  width: auto;
848 
  margin: $min-padding 0 0 0;
849 
  padding: 0 $padding;
850 
  box-sizing: border-box;
851 
  height: $form-item-height-normal;
852 
  border: 1px solid $form-border-color;
853 
  font-size: $font-size-normal;
854 
  font-family: $font-family;
855 
  line-height: $form-item-height-normal;
856 
  color: $white;
857 
  cursor: pointer;
858 
  font-weight: 600;
859 
  -webkit-font-smoothing: antialiased;
860 
  -moz-osx-font-smoothing: grayscale;
861 
 
862 
  &:focus {
863 
    box-shadow: 0 0 16px 0 rgba(133, 188, 255, 0.84);
864 
  }
865 
 
866 
  &:before,
867 
  &:after {
868 
    color: $white;
869 
  }
870 
 
871 
  .h5p-editing-image-button:before {
872 
    font-family: $icon-font-family;
873 
    content: "\e900";
874 
    color: #666;
875 
    padding-right: 0.25em;
876 
    vertical-align: middle;
877 
    font-size: 1.5em;
878 
    line-height: 0.9;
879 
  }
880 
 
881 
  &:hover:not([disabled]) {
882 
    @include button-background(
883 
      $form-item-importance-medium-background-hover,
884 
      $form-item-importance-medium-background-hover-highlight);
885 
    text-decoration: none;
886 
  }
887 
 
888 
  &.importance-high {
889 
    @include button-background(
890 
      $form-item-importance-high-background,
891 
      $form-item-importance-high-background-highlight);
892 
    border-color: $form-item-importance-high-border-color;
893 
    text-transform: uppercase;
894 
    height: $form-item-height-large;
895 
    line-height: $form-item-height-large;
896 
 
897 
    &:hover:not([disabled]) {
898 
      @include button-background(
899 
        $form-item-importance-high-background-hover,
900 
        $form-item-importance-high-background-hover-highlight);
901 
      border-color: $form-item-importance-high-background-hover;
902 
    }
903 
  }
904 
 
905 
  &.importance-low {
906 
    @include button-background(
907 
      $form-item-importance-low-background,
908 
      $form-item-importance-low-background-highlight);
909 
    border-color: $form-item-importance-low-border-color;
910 
    color: $black;
911 
 
912 
    &:before,
913 
    &:after {
914 
      color: $black;
915 
    }
916 
 
917 
    &:hover:not([disabled]) {
918 
      @include button-background(
919 
        $form-item-importance-low-background-hover,
920 
        $form-item-importance-low-background-hover-highlight);
921 
      border-color: $form-item-importance-low-background-hover;
922 
    }
923 
  }
924 
 
925 
  &[disabled],
926 
  &[aria-disabled="true"] {
927 
    background: #f5f5f5;
928 
    color: #707171;
929 
    border-color: #eeeeee;
930 
    cursor: not-allowed;
931 
 
932 
    &:before {
933 
      font-family: $icon-font-family;
934 
      content: "\e912";
935 
      color: #707171;
936 
      margin-right: 0.5em;
937 
      vertical-align: top;
938 
    }
939 
  }
940 
}
941 
.h5peditor-field-description,
942 
.h5p-help-text {
943 
  font-size: 12px;
944 
  margin-top: 0.3em;
945 
  margin-bottom: 1em;
946 
  font-weight: 500;
947 
  color: #434446;
948 
  line-height: 15px;
949 
  letter-spacing: 0.5px;
950 
}
951 
 
952 
.h5peditor-field-important-description {
953 
  position: relative;
954 
  padding: 1.5em 2.2em 2em 2.2em;
955 
  font-size: 0.9em;
956 
  margin: 0 0 20px 0;
957 
  border: 1px solid #ffde78;
958 
  background-color: #f9f9d8;
959 
  color: #000;
960 
  display: none;
961 
 
962 
  .important-description-close {
963 
    position: absolute;
964 
    font-size: 0.9em;
965 
    line-height: 2em;
966 
    right: 1.5em;
967 
    top: 1em;
968 
    user-select: none;
969 
    cursor: pointer;
970 
 
971 
    &:before {
972 
      font-family: $icon-font-family;
973 
      content: "\e894";
974 
      vertical-align: top;
975 
      font-size: 1.6em;
976 
    }
977 
  }
978 
 
979 
  .h5p-info-icon {
980 
    font-size: 0.75em;
981 
 
982 
    &:before {
983 
      font-family: $icon-font-family;
984 
      content: "\e909";
985 
      font-size: 2.3em;
986 
      line-height: 0.94em;
987 
      margin-left: -0.3em;
988 
      vertical-align: middle;
989 
    }
990 
  }
991 
 
992 
  .important-description-title {
993 
    font-weight: bold;
994 
    font-size: 1.2em;
995 
    vertical-align: bottom;
996 
  }
997 
 
998 
  .important-description-content {
999 
    ul {
1000 
      padding: 0;
1001 
      line-height: 2em;
1002 
      margin-top: 20px;
1003 
 
1004 
      li {
1005 
        line-height: 1.8em;
1006 
        margin-left: 1.5em;
1007 
      }
1008 
    }
1009 
  }
1010 
 
1011 
  .important-description-example {
1012 
    border: 1px solid #bbde98;
1013 
    background-color: #d9fac3;
1014 
    display: flex;
1015 
    margin-top: 20px;
1016 
 
1017 
    .important-description-example-title {
1018 
      padding: 15px;
1019 
      font-weight: bold;
1020 
    }
1021 
 
1022 
    .important-description-example-text {
1023 
      padding: 15px;
1024 
      width: 100%;
1025 
      background-color: #f6fef1;
1026 
    }
1027 
  }
1028 
}
1029 
 
1030 
.h5peditor-form {
1031 
  position: relative;
1032 
  background: $form-background;
1033 
  border: 1px solid $form-border-color;
1034 
 
1035 
  &.h5peditor-form-manager {
1036 
    > .tree,
1037 
    > .common,
1038 
    > .field {
1039 
      max-width: 918px;
1040 
      margin: 20px auto;
1041 
      padding: 0 20px;
1042 
    }
1043 
  }
1044 
 
1045 
  &.h5peditor-semi-fullscreen {
1046 
    margin: 0;
1047 
    position: fixed;
1048 
    overflow-y: scroll;
1049 
    margin-top: 40px;
1050 
    padding-bottom: 40px;
1051 
    box-sizing: border-box;
1052 
    background: #fff;
1053 
    height: calc(100% - 40px);
1054 
  }
1055 
}
1056 
 
1057 
.h5peditor-label {
1058 
  display: block;
1059 
  margin-bottom: 6px;
1060 
  font-weight: 600;
1061 
  font-size: $font-size-normal;
1062 
  color: $form-label;
1063 
}
1064 
 
1065 
#h5peditor-uploader {
1066 
  position: absolute;
1067 
  width: 1px;
1068 
  height: 1px;
1069 
  top: -1px;
1070 
  border: 0;
1071 
  overflow: hidden;
1072 
}
1073 
 
1074 
@import "tutorial-and-example-links";
1075 
 
1076 
.h5peditor-widget-select {
1077 
  overflow: hidden;
1078 
  margin: 0 0 -1px;
1079 
  padding: 0;
1080 
  list-style: none;
1081 
}
1082 
.h5peditor-widget-option {
1083 
  float: right;
1084 
  border: 1px solid #ccc;
1085 
  border-bottom: 0;
1086 
  margin-left: 0.5em;
1087 
  padding: 0.6em 1em;
1088 
  color: #0E1A25;
1089 
  font-size: 0.875em;
1090 
  background: #f5f5f5;
1091 
  line-height: 1.285714286em;
1092 
  cursor: pointer;
1093 
  outline: none;
1094 
}
1095 
.h5peditor-widget-option:hover {
1096 
  color: #000;
1097 
}
1098 
.h5peditor-widget-option:active {
1099 
  color: #8e636a; /* Pink chocolate */
1100 
}
1101 
.h5peditor-widget-active {
1102 
  background: #fff;
1103 
  line-height: 1.357142857em;
1104 
}
1105 
.h5peditor-widgets > .h5peditor-widget-wrapper {
1106 
  border: 1px solid #ccc;
1107 
  margin: 0 0 0.25em;
1108 
  padding: 0.5em;
1109 
}
1110 
.h5peditor-widgets > .h5peditor-label {
1111 
  float: left;
1112 
  margin-top: 5px;
1113 
}
1114 
.h5p-editor-iframe {
1115 
  margin-bottom: 1em;
1116 
}
1117 
.h5peditor-required:after {
1118 
  content: "*";
1119 
  color: #da0001;
1120 
  margin-left: 0.2em;
1121 
  position: relative;
1122 
  top: -0.2em;
1123 
}
1124 
 
1125 
/* Help CKEditor blend into the H5PEditor */
1126 
.h5peditor .cke_bottom,
1127 
.h5peditor .cke_top {
1128 
  background: #d0d0d1;
1129 
}
1130 
.h5peditor .cke_chrome {
1131 
  border: 1px solid #f5f5f5;
1132 
  background: #d0d0d1;
1133 
}
1134 
.h5peditor .cke_contents,
1135 
.h5peditor .cke_toolgroup,
1136 
.h5peditor .cke_combo_button {
1137 
  border: 1px solid #f5f5f5;
1138 
}
1139 
 
1140 
/* The show important description button */
1141 
.important-description-show {
1142 
  background: #f3d55a;
1143 
  padding: 0.2em 0.5em 0.2em 1.7em;
1144 
  margin-bottom: 0.5em;
1145 
  font-size: 0.9em;
1146 
  cursor: pointer;
1147 
  float: right;
1148 
  position: relative;
1149 
  line-height: normal;
1150 
 
1151 
  font-style: italic;
1152 
  font-weight: bold;
1153 
 
1154 
  &:before {
1155 
    font-family: $icon-font-family;
1156 
    font-style: normal;
1157 
    font-weight: normal;
1158 
    content: "\e909";
1159 
    font-size: 1.8em;
1160 
    position: absolute;
1161 
    left: 0em;
1162 
    top: 0em;
1163 
    line-height: 0.85em;
1164 
    vertical-align: top;
1165 
  }
1166 
}
1167 
 
1168 
.important-description-clear-right {
1169 
  display: block;
1170 
  clear: right;
1171 
}
1172 
 
1173 
.h5peditor fieldset.common-fields-library-wrapper {
1174 
  width: 100%;
1175 
  padding: 0 1em 1em;
1176 
  box-sizing: border-box;
1177 
  height: 20px;
1178 
  border: solid 1px #e2e5ee;
1179 
  border-radius: 4px;
1180 
  margin-bottom: 1em;
1181 
 
1182 
  & > * {
1183 
    display: none;
1184 
  }
1185 
  & > legend {
1186 
    display: block;
1187 
    cursor: pointer;
1188 
    outline: none;
1189 
    color: #363b42;
1190 
    background-color: #fff;
1191 
    padding: 10px;
1192 
    font-weight: bold;
1193 
    font-size: 0.875em;
1194 
 
1195 
    &:before {
1196 
      font-family: "H5P";
1197 
      content: "\e566";
1198 
      margin-right: 0.5em;
1199 
    }
1200 
    &:focus:before {
1201 
      outline: 1px dotted #666;
1202 
    }
1203 
  }
1204 
 
1205 
  &.expanded {
1206 
    height: auto;
1207 
 
1208 
    & > * {
1209 
      display: block;
1210 
    }
1211 
    & > legend:before {
1212 
      content: "\e565";
1213 
    }
1214 
  }
1215 
}
1216 
 
1217 
@import "metadata-form";
1218 
@import "metadata-popup";
1219 
@import "metadata-changelog-widget";
1220 
@import "metadata-author-widget";
1221 
@import "copy-paste";
1222 
@import "fullscreen-bar";
1223 
 
1224 
.h5peditor .h5peditor-language-switcher {
1225 
  float: right;
1226 
  white-space: nowrap;
1227 
  margin-bottom: 1em;
1228 
 
1229 
  .language-label {
1230 
    padding: 0 10px;
1231 
    font-size: 15px;
1232 
  }
1233 
  select {
1234 
    padding: 6px 30px 6px 8px;
1235 
    font-size: 15px;
1236 
  }
1237 
}
1238 
.h5peditor-language-notice {
1239 
  display: none;
1240 
  clear: both;
1241 
  font-size: 14px;
1242 
  background: #dcf6ff;
1243 
  color: #295b7a;
1244 
  padding: 10px 20px 10px 40px;
1245 
  margin: 1em 0;
1246 
  line-height: 1.5;
1247 
  position: relative;
1248 
 
1249 
  &:before {
1250 
    font-family: h5p;
1251 
    content: "\e90c";
1252 
    position: absolute;
1253 
    left: 15px;
1254 
    font-size: 1.125em;
1255 
  }
1256 
  &.show {
1257 
    display: block;
1258 
  }
1259 
  .first {
1260 
    font-weight: bold;
1261 
  }
1262 
  a {
1263 
    text-decoration: underline;
1264 
  }
1265 
}