357 } |
373 } |
358 .pagination a.active{ |
374 .pagination a.active{ |
359 color: #de2500; |
375 color: #de2500; |
360 text-decoration: none; |
376 text-decoration: none; |
361 } |
377 } |
|
378 |
|
379 /* content */ |
|
380 .left-content, |
|
381 .right-content{ |
|
382 padding-top: 8px; |
|
383 float: left; |
|
384 } |
|
385 .left-content h2, |
|
386 .right-content h2{ |
|
387 padding: 6px 0; |
|
388 margin-bottom: 14px; |
|
389 border-bottom: 1px solid #333333; |
|
390 color: #30036d; |
|
391 font-size: 18px; |
|
392 font-weight: 600; |
|
393 } |
|
394 /* left-content */ |
|
395 .left-content{ |
|
396 width: 630px; |
|
397 margin-right: 20px; |
|
398 } |
|
399 /* right-content */ |
|
400 .right-content{ |
|
401 width: 310px; |
|
402 } |
|
403 /* list-video */ |
|
404 .list-video { |
|
405 overflow: hidden; |
|
406 overflow-y: auto; |
|
407 height: 680px; |
|
408 } |
|
409 .item-video { |
|
410 margin-bottom: 1px; |
|
411 cursor: pointer; |
|
412 padding: 5px 10px 5px 10px; |
|
413 clear: both; |
|
414 width: auto; |
|
415 min-height: 62px; |
|
416 display: block; |
|
417 } |
|
418 .item-video img{ |
|
419 float: left; |
|
420 margin-right: 4px; |
|
421 max-width: 80px; |
|
422 max-height: 60px; |
|
423 box-shadow: 2px 2px 2px #333333; |
|
424 } |
|
425 .item-video .video-info{ |
|
426 display: block; |
|
427 margin-left: 88px; |
|
428 } |
|
429 .item-video .title-video{ |
|
430 font-size: 13px; |
|
431 font-weight: 600; |
|
432 color: #30036d; |
|
433 display: block; |
|
434 margin-bottom: 1px; |
|
435 } |
|
436 .item-video .author{ |
|
437 font-size: 11px; |
|
438 display: block; |
|
439 margin-bottom: 1px; |
|
440 } |
|
441 .item-video .time-length{ |
|
442 font-size: 12px; |
|
443 font-weight: 600; |
|
444 display: block; |
|
445 } |
|
446 .item-video .time-length span{ |
|
447 color: #de2500; |
|
448 } |
|
449 .item-video .number{ |
|
450 color: #FFF; |
|
451 font-size: 10px; |
|
452 text-align: center; |
|
453 width:15px; |
|
454 height: 15px; |
|
455 line-height: 15px; |
|
456 background-color: #ff00fc; |
|
457 position: absolute; |
|
458 display: block; |
|
459 -webkit-border-radius: 4px; |
|
460 -moz-border-radius: 4px; |
|
461 border-radius: 4px; |
|
462 top: 54px; |
|
463 left: 78px; |
|
464 } |
|
465 .item-video .subtitle{ |
|
466 margin-bottom: 2px; |
|
467 display: block; |
|
468 color: #de2500; |
|
469 font-size: 11px; |
|
470 } |
|
471 .item-video .duration{ |
|
472 color: #7628df; |
|
473 font-size: 12px; |
|
474 font-weight: 600; |
|
475 display: block; |
|
476 } |
|
477 /* frise */ |
|
478 .frise{ |
|
479 height: 22px; |
|
480 overflow: hidden; |
|
481 position: relative; |
|
482 border: 1px solid #333333; |
|
483 } |
|
484 .frise-segments,.frise-indications{ |
|
485 width: 100%; |
|
486 height: 100%; |
|
487 position: absolute; |
|
488 top: 0; |
|
489 left: 0; |
|
490 } |
|
491 .frise-indications{ |
|
492 z-index: 2; |
|
493 } |
|
494 |
|
495 |
|
496 .aucun-segment{ |
|
497 font-weight: 600; |
|
498 font-style: italic; |
|
499 text-align: center; |
|
500 line-height: 20px; |
|
501 width: 100%; |
|
502 z-index:0; |
|
503 background: #CCCCCC; |
|
504 } |
|
505 .frise-segment{ |
|
506 height: 22px; |
|
507 position: absolute; |
|
508 background-image: url(../img/border-right-segment.png); |
|
509 background-repeat: repeat-y; |
|
510 background-position: right top; |
|
511 -moz-box-shadow: inset 0px 1px 1px 0px #666; |
|
512 -webkit-box-shadow: inset 0px 1px 1px 0px #666; |
|
513 box-shadow: inset 0px 1px 1px 0px #666; |
|
514 } |
|
515 .frise-segment:first-child{ |
|
516 -moz-box-shadow: inset 1px 1px 1px 0px #666; |
|
517 -webkit-box-shadow: inset 1px 1px 1px 0px #666; |
|
518 box-shadow: inset 1px 1px 1px 0px #666; |
|
519 } |
|
520 .frise-segment:last-child{ |
|
521 background-image: none; |
|
522 } |
|
523 .frise-indication{ |
|
524 height: 22px; |
|
525 line-height: 22px; |
|
526 display: inline-block; |
|
527 position: absolute; |
|
528 color: #FFF; |
|
529 top:0; |
|
530 left: 0px; |
|
531 font-size: 10px; |
|
532 width: 30px; |
|
533 text-align: center; |
|
534 background: url(../img/bg-indication.png) 15px 0 no-repeat; |
|
535 margin-left: -15px; |
|
536 } |
|
537 .frise-position { |
|
538 width: 1px; margin-left: -0.5px; position: absolute; height: 100%; background: #FF00FC; |
|
539 } |
|
540 /* col-middle - bloc-segmentation - popin.segmentation */ |
|
541 |
|
542 .pointer-padder { |
|
543 left: 5px; |
|
544 position: absolute; |
|
545 right: 5px; |
|
546 top: 0; |
|
547 } |
|
548 |
|
549 .pointer-padder .pointer { |
|
550 top: 0; margin-left: -10px; |
|
551 } |
|
552 |
|
553 .segment-info { |
|
554 padding-top: 12px; |
|
555 position: relative; |
|
556 width: 100%; |
|
557 overflow: hidden; |
|
558 } |
|
559 |
|
560 .segmentation h2{ |
|
561 font-size: 14px; |
|
562 font-weight: 600; |
|
563 color:#de2500; |
|
564 margin-bottom: 10px; |
|
565 } |
|
566 |
|
567 .time-tangle { |
|
568 color: #7628df; cursor: w-resize; position: relative; |
|
569 } |
|
570 .time-tangle:hover, |
|
571 .time-tangle.active { |
|
572 color: #FF00FC; border-bottom: 1px dashed #7628df; |
|
573 } |
|
574 .time-tangle:hover:after, |
|
575 .time-tangle.active:after { |
|
576 color: #7628DF; position: absolute; top: 18px; left: 50%; width: 160px; |
|
577 margin-left: -80px; font-size: 12px; text-align: center; |
|
578 content: "glisser pour modifier" |
|
579 } |
|
580 |
|
581 .time-tangle.deactivate:hover { |
|
582 border: none; color: #7628DF; |
|
583 } |
|
584 |
|
585 .time-tangle.deactivate:hover:after { |
|
586 display: none; |
|
587 } |
|
588 |
|
589 .segmentation form{ |
|
590 overflow: hidden; |
|
591 } |
|
592 .form-segment-left, |
|
593 .form-segment-right{ |
|
594 float: left; |
|
595 } |
|
596 .segmentation .form-segment-left{ |
|
597 width: 228px; |
|
598 } |
|
599 .segmentation form p{ |
|
600 margin-bottom: 8px; |
|
601 } |
|
602 .segmentation label{ |
|
603 display: block; |
|
604 font-size: 12px; |
|
605 font-weight: 600; |
|
606 margin-bottom: 4px; |
|
607 } |
|
608 .segmentation textarea{ |
|
609 width: 200px; |
|
610 height: 66px; |
|
611 max-width: 200px; |
|
612 font-size: 12px; |
|
613 } |
|
614 .segmentation input[type=text]{ |
|
615 font-size: 12px; |
|
616 width: 200px; |
|
617 height: 20px; |
|
618 } |
|
619 |
|
620 .add-segment { |
|
621 float: right; margin: 4px 0; |
|
622 } |
|
623 .media-segments h2{ |
|
624 color: #30036d; |
|
625 font-size: 14px; |
|
626 font-weight: 600; |
|
627 margin: 10px 8px 2px; |
|
628 } |
|
629 |
|
630 .media-segment { |
|
631 height: 8px; |
|
632 margin: 8px 6px 0; |
|
633 background-color: #b6b8b8; |
|
634 position: relative; |
|
635 } |
|
636 .media-section { |
|
637 position: absolute; |
|
638 } |
|
639 .media-segment-section { |
|
640 top: 0; height: 8px; |
|
641 } |
|
642 |
|
643 .media-current-section { |
|
644 background: url(../img/pinstripe-purple.png); |
|
645 top: -2px; height: 2px; |
|
646 } |
|
647 |
|
648 .media-current-section-inner { |
|
649 background: url(../img/pinstripe-purple.png); |
|
650 margin-top: 10px; height: 2px; |
|
651 } |
|
652 .media-segment .pointer{ |
|
653 margin-left: 140px |
|
654 } |
|
655 .media-segment-popin { |
|
656 padding-top: 12px; overflow: hidden; |
|
657 top: 2px; width: 300px; margin-left: -151px; |
|
658 display: none; |
|
659 } |
|
660 .media-segment-popin h3{ |
|
661 padding: 0; |
|
662 color: #de2500; |
|
663 margin-bottom: 4px; |
|
664 font-weight: 600; |
|
665 } |
|
666 .media-segment-popin p{ |
|
667 margin-right: 155px; |
|
668 font-size: 12px; |
|
669 } |
|
670 .media-segment-popin span{ |
|
671 color: #7628df; |
|
672 } |
|
673 .reprendre-segment{ |
|
674 float: right; |
|
675 display: block; |
|
676 } |
|
677 /* popin - frise-description */ |
|
678 |
|
679 .annotation-title { |
|
680 color: #de2500; |
|
681 font-size: 14px; |
|
682 font-weight: bold; |
|
683 } |
|
684 .annotation-media-title{ |
|
685 font-size: 12px; |
|
686 color: #30036d; |
|
687 font-weight: 600; |
|
688 } |
|
689 .annotation-time { |
|
690 color: #7628DF; |
|
691 } |
|
692 .mashup-description table{ |
|
693 font-size: 12px; |
|
694 } |
|
695 .mashup-description th{ |
|
696 text-align: left; |
|
697 font-weight: 600; |
|
698 display: block; |
|
699 min-width: 75px; |
|
700 } |
|
701 .mashup-description td{ |
|
702 line-height: 15px; |
|
703 padding-left: 2px; |
|
704 } |
|
705 .mashup-description th, |
|
706 .mashup-description td, |
|
707 .mashup-description h2{ |
|
708 padding-bottom: 8px; |
|
709 } |
|
710 .mashup-description .tools{ |
|
711 float: right; |
|
712 } |
|
713 |
|
714 |
|
715 .widget { |
|
716 position: relative; |
|
717 } |
|
718 |
|
719 /* Styles from Metadataplayer */ |
|
720 |
|
721 /* Slider Widget */ |
|
722 |
|
723 .Ldt-Slider-Container { |
|
724 background: #969696; |
|
725 background: -moz-linear-gradient(left, #747474 50%, #B6B8B8 50%); |
|
726 background: -webkit-linear-gradient(left, #747474 50%, #B6B8B8 50%); |
|
727 border-top: 1px solid #969696; |
|
728 height: 4px; |
|
729 } |
|
730 |
|
731 .Ldt-Slider { |
|
732 border: none; border-radius: 0; padding: 0; margin: 0 6px; height: 100%; background: #B6B8B8; |
|
733 } |
|
734 |
|
735 .Ldt-Slider .ui-slider-handle { |
|
736 border-radius: 8px; top: -2px; background: #ff00fc; border: 1px solid #ffffff; |
|
737 } |
|
738 |
|
739 .Ldt-Slider .ui-slider-range { |
|
740 background: #747474; |
|
741 } |
|
742 |
|
743 .Ldt-Slider-Time { |
|
744 position: absolute; top: -16px; background: #ffffc0; color: #000000; border-radius: 3px; z-index: 8; |
|
745 font-size: 10px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -20px; |
|
746 display: none; text-align: center; font-weight: bold; |
|
747 } |
|
748 |
|
749 /* Controller Widget */ |
|
750 |
|
751 .Ldt-Ctrl { |
|
752 font-size: 10px; |
|
753 background:url('../img/player_gradient.png') repeat-x transparent ; |
|
754 height: 25px; |
|
755 border: 1px solid #969696; |
|
756 position: relative; |
|
757 } |
|
758 |
|
759 .Ldt-Ctrl-Left { |
|
760 float:left; width: 300px; |
|
761 } |
|
762 |
|
763 .Ldt-Ctrl-Right { |
|
764 float: right; |
|
765 } |
|
766 |
|
767 .Ldt-Ctrl-button { |
|
768 float: left; |
|
769 width: 30px; height: 25px; |
|
770 background: url('../img/player-sprites.png'); |
|
771 cursor: pointer; |
|
772 } |
|
773 |
|
774 .Ldt-Ctrl-spacer { |
|
775 float: left; width: 1px; height: 25px; background: #969696; |
|
776 } |
|
777 |
|
778 .Ldt-Ctrl-Play { |
|
779 margin: 0 15px; |
|
780 } |
|
781 |
|
782 .Ldt-Ctrl-Play-PlayState { |
|
783 background-position: 0 0; |
|
784 } |
|
785 |
|
786 .Ldt-Ctrl-Play-PlayState:hover { |
|
787 background-position: 0 -25px; |
|
788 } |
|
789 |
|
790 .Ldt-Ctrl-Play-PlayState:active { |
|
791 background-position: 0 -50px; |
|
792 } |
|
793 |
|
794 .Ldt-Ctrl-Play-PauseState { |
|
795 background-position: -30px 0; |
|
796 } |
|
797 |
|
798 .Ldt-Ctrl-Play-PauseState:hover { |
|
799 background-position: -30px -25px; |
|
800 } |
|
801 |
|
802 .Ldt-Ctrl-Play-PauseState:active { |
|
803 background-position: -30px -50px; |
|
804 } |
|
805 |
|
806 .Ldt-Ctrl-InOutBlock { |
|
807 display: none; |
|
808 } |
|
809 |
|
810 .segment-mode .Ldt-Ctrl-InOutBlock { |
|
811 display: block; |
|
812 } |
|
813 |
|
814 .Ldt-Ctrl-SetIn, .Ldt-Ctrl-SetOut { |
|
815 margin: 0 2px; |
|
816 } |
|
817 |
|
818 .Ldt-Ctrl-SetIn { |
|
819 background-position: -60px 0; |
|
820 } |
|
821 |
|
822 .Ldt-Ctrl-SetIn:hover { |
|
823 background-position: -60px -25px; |
|
824 } |
|
825 |
|
826 .Ldt-Ctrl-SetIn:active { |
|
827 background-position: -60px -50px; |
|
828 } |
|
829 |
|
830 .Ldt-Ctrl-SetOut { |
|
831 background-position: -90px 0; |
|
832 } |
|
833 |
|
834 .Ldt-Ctrl-SetOut:hover { |
|
835 background-position: -90px -25px; |
|
836 } |
|
837 |
|
838 .Ldt-Ctrl-SetOut:active { |
|
839 background-position: -90px -50px; |
|
840 } |
|
841 |
|
842 .Ldt-Ctrl-Time { |
|
843 float: left; |
|
844 margin: 7px 5px 0; |
|
845 font-size: 12px; |
|
846 font-family: Arial, Verdana, sans-serif; |
|
847 } |
|
848 |
|
849 .Ldt-Ctrl-Time-Elapsed { |
|
850 float: left; |
|
851 color: #4a4a4a; |
|
852 } |
|
853 |
|
854 .Ldt-Ctrl-Time-Separator { |
|
855 margin: 0 4px; |
|
856 float: left; |
|
857 } |
|
858 |
|
859 .Ldt-Ctrl-Time-Total { |
|
860 float: left; |
|
861 color: #b2b2b2; |
|
862 } |
|
863 |
|
864 .Ldt-Ctrl-Sound { |
|
865 margin: 0 2px; |
|
866 } |
|
867 |
|
868 .Ldt-Ctrl-Sound-Full { |
|
869 background-position: -120px 0; |
|
870 } |
|
871 |
|
872 .Ldt-Ctrl-Sound-Full:hover { |
|
873 background-position: -120px -25px; |
|
874 } |
|
875 |
|
876 .Ldt-Ctrl-Sound-Full:active { |
|
877 background-position: -120px -50px; |
|
878 } |
|
879 |
|
880 .Ldt-Ctrl-Sound-Mute { |
|
881 background-position: -150px 0; |
|
882 } |
|
883 |
|
884 .Ldt-Ctrl-Sound-Mute:hover { |
|
885 background-position: -150px -25px; |
|
886 } |
|
887 |
|
888 .Ldt-Ctrl-Sound-Mute:active { |
|
889 background-position: -150px -50px; |
|
890 } |
|
891 |
|
892 .Ldt-Ctrl-Sound-Half { |
|
893 background-position: -180px 0; |
|
894 } |
|
895 |
|
896 .Ldt-Ctrl-Sound-Half:hover { |
|
897 background-position: -180px -25px; |
|
898 } |
|
899 |
|
900 .Ldt-Ctrl-Sound-Half:active { |
|
901 background-position: -180px -50px; |
|
902 } |
|
903 |
|
904 .Ldt-Ctrl-Volume-Control { |
|
905 display: none; |
|
906 position: absolute; |
|
907 background:url('../img/player_gradient.png') repeat-x transparent ; |
|
908 height: 25px; |
|
909 width: 100px; top: 25px; right: -1px; z-index: 100; |
|
910 padding: 0 2px; |
|
911 border: 1px solid #b6b8b8; |
|
912 } |
|
913 |
|
914 .Ldt-Ctrl-Volume-Bar { |
|
915 height: 5px; margin: 9px 3px 0; background: #cccccc; border: 1px solid #999999; border-radius: 2px; |
|
916 } |
|
917 |
|
918 .Ldt-Ctrl-Volume-Control .ui-slider-handle { |
|
919 width: 6px; height: 19px; background: #a8a8a8; border: 1px solid #999999; border-radius: 2px; top: -8px; margin-left: -4px; |
|
920 cursor: pointer; |
|
921 } |
|
922 |
|
923 .Ldt-Ctrl-Volume-Control:hover .ui-slider-handle { |
|
924 background: #F7268E; |
|
925 } |
|
926 |
|
927 /* Slice Widget */ |
|
928 |
|
929 .Ldt-Slice { |
|
930 border-radius: 0; border: none; padding: 0; margin: 12px 6px; background: #B6B8B8; height: 8px; |
|
931 } |
|
932 |
|
933 .Ldt-Slice .ui-slider-handle { |
|
934 width: 7px; height: 20px; top: 0; border: none; margin: 0; padding: 0; |
|
935 background: url(../img/slice-handles.png); border-radius: 0; cursor: pointer; |
|
936 } |
|
937 |
|
938 .ui-slider-handle.Ldt-Slice-left-handle { |
|
939 margin-left: -7px; |
|
940 } |
|
941 |
|
942 .ui-slider-handle.Ldt-Slice-left-handle.ui-state-hover, .ui-slider-handle.Ldt-Slice-left-handle.ui-state-active { |
|
943 background-position: 0 -20px; |
|
944 } |
|
945 |
|
946 .ui-slider-handle.Ldt-Slice-right-handle { |
|
947 margin-left: 0; background-position: -7px 0; |
|
948 } |
|
949 |
|
950 .ui-slider-handle.Ldt-Slice-right-handle.ui-state-hover, .ui-slider-handle.Ldt-Slice-right-handle.ui-state-active { |
|
951 background-position: -7px -20px; |
|
952 } |
|
953 |
|
954 .Ldt-Slice .ui-slider-range { |
|
955 background: url(../img/pinstripe-purple.png); |
|
956 } |