357 } |
374 } |
358 .pagination a.active{ |
375 .pagination a.active{ |
359 color: #de2500; |
376 color: #de2500; |
360 text-decoration: none; |
377 text-decoration: none; |
361 } |
378 } |
|
379 |
|
380 /* content */ |
|
381 .left-content, |
|
382 .right-content{ |
|
383 padding-top: 8px; |
|
384 float: left; |
|
385 } |
|
386 .left-content h2, |
|
387 .right-content h2{ |
|
388 padding: 6px 0; |
|
389 margin-bottom: 14px; |
|
390 border-bottom: 1px solid #333333; |
|
391 color: #30036d; |
|
392 font-size: 18px; |
|
393 font-weight: 600; |
|
394 } |
|
395 /* left-content */ |
|
396 .left-content{ |
|
397 width: 630px; |
|
398 margin-right: 20px; |
|
399 } |
|
400 /* right-content */ |
|
401 .right-content{ |
|
402 width: 310px; |
|
403 } |
|
404 /* list-video */ |
|
405 .list-video { |
|
406 overflow: hidden; |
|
407 overflow-y: auto; |
|
408 height: 680px; |
|
409 } |
|
410 .item-video { |
|
411 margin-bottom: 1px; |
|
412 cursor: pointer; |
|
413 padding: 5px 10px 5px 10px; |
|
414 clear: both; |
|
415 width: auto; |
|
416 min-height: 62px; |
|
417 display: block; |
|
418 } |
|
419 .item-video img{ |
|
420 float: left; |
|
421 margin-right: 4px; |
|
422 max-width: 80px; |
|
423 max-height: 60px; |
|
424 box-shadow: 2px 2px 2px #333333; |
|
425 } |
|
426 .item-video .video-info{ |
|
427 display: block; |
|
428 margin-left: 88px; |
|
429 } |
|
430 .item-video .title-video{ |
|
431 font-size: 13px; |
|
432 font-weight: 600; |
|
433 color: #30036d; |
|
434 display: block; |
|
435 margin-bottom: 1px; |
|
436 } |
|
437 .item-video .author{ |
|
438 font-size: 11px; |
|
439 display: block; |
|
440 margin-bottom: 1px; |
|
441 } |
|
442 .item-video .time-length{ |
|
443 font-size: 12px; |
|
444 font-weight: 600; |
|
445 display: block; |
|
446 } |
|
447 .item-video .time-length span{ |
|
448 color: #de2500; |
|
449 } |
|
450 .item-video .number{ |
|
451 color: #FFF; |
|
452 font-size: 10px; |
|
453 text-align: center; |
|
454 width:15px; |
|
455 height: 15px; |
|
456 line-height: 15px; |
|
457 background-color: #ff00fc; |
|
458 position: absolute; |
|
459 display: block; |
|
460 -webkit-border-radius: 4px; |
|
461 -moz-border-radius: 4px; |
|
462 border-radius: 4px; |
|
463 top: 54px; |
|
464 left: 78px; |
|
465 } |
|
466 .item-video .subtitle{ |
|
467 margin-bottom: 2px; |
|
468 display: block; |
|
469 color: #de2500; |
|
470 font-size: 11px; |
|
471 } |
|
472 .item-video .duration{ |
|
473 color: #7628df; |
|
474 font-size: 12px; |
|
475 font-weight: 600; |
|
476 display: block; |
|
477 } |
|
478 /* frise */ |
|
479 .frise{ |
|
480 height: 22px; |
|
481 position: relative; |
|
482 border: 1px solid #333333; |
|
483 } |
|
484 |
|
485 .frise-overflow { |
|
486 position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; |
|
487 } |
|
488 .bloc-pvw .frise { |
|
489 margin: 7px 5px 2px; |
|
490 } |
|
491 |
|
492 .aucun-segment{ |
|
493 font-weight: 600; |
|
494 font-style: italic; |
|
495 text-align: center; |
|
496 line-height: 20px; |
|
497 width: 100%; |
|
498 z-index:0; |
|
499 background: #CCCCCC; |
|
500 } |
|
501 .frise-segment{ |
|
502 height: 22px; |
|
503 position: absolute; |
|
504 background-image: url(../img/border-right-segment.png); |
|
505 background-repeat: repeat-y; |
|
506 background-position: right top; |
|
507 -moz-box-shadow: inset 0px 1px 1px 0px #666; |
|
508 -webkit-box-shadow: inset 0px 1px 1px 0px #666; |
|
509 box-shadow: inset 0px 1px 1px 0px #666; |
|
510 } |
|
511 .frise-segment:first-child{ |
|
512 -moz-box-shadow: inset 1px 1px 1px 0px #666; |
|
513 -webkit-box-shadow: inset 1px 1px 1px 0px #666; |
|
514 box-shadow: inset 1px 1px 1px 0px #666; |
|
515 } |
|
516 .frise-segment:last-child{ |
|
517 background-image: none; |
|
518 } |
|
519 .frise-segment.active { |
|
520 background-image: url(../img/pinstripe-purple.png); |
|
521 background-repeat: repeat; |
|
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; top: -8px; bottom: 0; margin-left: -0.5px; position: absolute; |
|
539 z-index: 3; background: #FF00FC; |
|
540 } |
|
541 /* col-middle - bloc-segmentation - popin.segmentation */ |
|
542 |
|
543 .pointer-padder { |
|
544 left: 5px; |
|
545 position: absolute; |
|
546 right: 5px; |
|
547 top: 0; |
|
548 } |
|
549 |
|
550 .pointer-padder .pointer { |
|
551 top: 0; margin-left: -10px; |
|
552 } |
|
553 |
|
554 .segment-info { |
|
555 padding-top: 12px; |
|
556 position: relative; |
|
557 width: 100%; |
|
558 overflow: hidden; |
|
559 } |
|
560 |
|
561 /* popin - frise-description */ |
|
562 |
|
563 .annotation-title { |
|
564 color: #de2500; |
|
565 font-size: 14px; |
|
566 font-weight: bold; |
|
567 } |
|
568 .annotation-time { |
|
569 color: #7628DF; |
|
570 } |
|
571 .mashup-description table{ |
|
572 font-size: 12px; |
|
573 } |
|
574 .mashup-description th{ |
|
575 text-align: left; |
|
576 font-weight: 600; |
|
577 display: block; |
|
578 min-width: 75px; |
|
579 } |
|
580 .mashup-description td{ |
|
581 line-height: 15px; |
|
582 padding-left: 2px; |
|
583 } |
|
584 .mashup-description th, |
|
585 .mashup-description td, |
|
586 .mashup-description h2{ |
|
587 padding-bottom: 8px; |
|
588 } |
|
589 .mashup-description .tools{ |
|
590 float: right; |
|
591 } |
|
592 |
|
593 .video { |
|
594 background: #333333; |
|
595 position: relative; |
|
596 } |
|
597 .video-wait { |
|
598 display: none; |
|
599 position: absolute; left: 0; top: 0; width: 100%; height: 100%; |
|
600 background-color: rgba(120, 120, 140, .6); |
|
601 background-image: url(../img/reel.gif); |
|
602 background-position: center; |
|
603 background-repeat: no-repeat; |
|
604 z-index: 3; |
|
605 } |
|
606 .widget { |
|
607 position: relative; |
|
608 } |
|
609 |
|
610 /* Styles from Metadataplayer */ |
|
611 |
|
612 /* Slider Widget */ |
|
613 |
|
614 .Ldt-Slider-Container { |
|
615 background: #969696; |
|
616 background: -moz-linear-gradient(left, #747474 50%, #B6B8B8 50%); |
|
617 background: -webkit-linear-gradient(left, #747474 50%, #B6B8B8 50%); |
|
618 border-top: 1px solid #969696; |
|
619 height: 4px; |
|
620 position: relative; z-index: 5; |
|
621 } |
|
622 |
|
623 .Ldt-Slider { |
|
624 border: none; border-radius: 0; padding: 0; height: 100%; background: #B6B8B8; |
|
625 } |
|
626 |
|
627 .Ldt-Slider .ui-slider-handle { |
|
628 border-radius: 8px; top: -2px; background: #ff00fc; border: 1px solid #ffffff; |
|
629 } |
|
630 |
|
631 .Ldt-Slider .ui-slider-range { |
|
632 background: #747474; |
|
633 } |
|
634 |
|
635 .Ldt-Slider-Time { |
|
636 position: absolute; top: -16px; background: #ffffc0; color: #000000; border-radius: 3px; z-index: 8; |
|
637 font-size: 10px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -14px; |
|
638 display: none; text-align: center; font-weight: bold; |
|
639 } |
|
640 |
|
641 /* Controller Widget */ |
|
642 |
|
643 .Ldt-Ctrl { |
|
644 font-size: 10px; |
|
645 background:url('../img/player_gradient.png') repeat-x transparent ; |
|
646 height: 25px; |
|
647 border: 1px solid #969696; |
|
648 position: relative; |
|
649 } |
|
650 |
|
651 .Ldt-Ctrl-Left { |
|
652 float:left; width: 300px; |
|
653 } |
|
654 |
|
655 .Ldt-Ctrl-Right { |
|
656 float: right; |
|
657 } |
|
658 |
|
659 .Ldt-Ctrl-button { |
|
660 float: left; |
|
661 width: 30px; height: 25px; |
|
662 background: url('../img/player-sprites.png'); |
|
663 cursor: pointer; |
|
664 } |
|
665 |
|
666 .Ldt-Ctrl-spacer { |
|
667 float: left; width: 1px; height: 25px; background: #969696; |
|
668 } |
|
669 |
|
670 .Ldt-Ctrl-Play { |
|
671 margin: 0 15px; |
|
672 } |
|
673 |
|
674 .Ldt-Ctrl-Play-PlayState { |
|
675 background-position: 0 0; |
|
676 } |
|
677 |
|
678 .Ldt-Ctrl-Play-PlayState:hover { |
|
679 background-position: 0 -25px; |
|
680 } |
|
681 |
|
682 .Ldt-Ctrl-Play-PlayState:active { |
|
683 background-position: 0 -50px; |
|
684 } |
|
685 |
|
686 .Ldt-Ctrl-Play-PauseState { |
|
687 background-position: -30px 0; |
|
688 } |
|
689 |
|
690 .Ldt-Ctrl-Play-PauseState:hover { |
|
691 background-position: -30px -25px; |
|
692 } |
|
693 |
|
694 .Ldt-Ctrl-Play-PauseState:active { |
|
695 background-position: -30px -50px; |
|
696 } |
|
697 |
|
698 .Ldt-Ctrl-InOutBlock { |
|
699 display: none; |
|
700 } |
|
701 |
|
702 .segment-mode .Ldt-Ctrl-InOutBlock { |
|
703 display: block; |
|
704 } |
|
705 |
|
706 .Ldt-Ctrl-SetIn, .Ldt-Ctrl-SetOut { |
|
707 margin: 0 2px; |
|
708 } |
|
709 |
|
710 .Ldt-Ctrl-SetIn { |
|
711 background-position: -60px 0; |
|
712 } |
|
713 |
|
714 .Ldt-Ctrl-SetIn:hover { |
|
715 background-position: -60px -25px; |
|
716 } |
|
717 |
|
718 .Ldt-Ctrl-SetIn:active { |
|
719 background-position: -60px -50px; |
|
720 } |
|
721 |
|
722 .Ldt-Ctrl-SetOut { |
|
723 background-position: -90px 0; |
|
724 } |
|
725 |
|
726 .Ldt-Ctrl-SetOut:hover { |
|
727 background-position: -90px -25px; |
|
728 } |
|
729 |
|
730 .Ldt-Ctrl-SetOut:active { |
|
731 background-position: -90px -50px; |
|
732 } |
|
733 |
|
734 .Ldt-Ctrl-Time { |
|
735 float: left; |
|
736 margin: 7px 5px 0; |
|
737 font-size: 12px; |
|
738 font-family: Arial, Verdana, sans-serif; |
|
739 } |
|
740 |
|
741 .Ldt-Ctrl-Time-Elapsed { |
|
742 float: left; |
|
743 color: #4a4a4a; |
|
744 } |
|
745 |
|
746 .Ldt-Ctrl-Time-Separator { |
|
747 margin: 0 4px; |
|
748 float: left; |
|
749 } |
|
750 |
|
751 .Ldt-Ctrl-Time-Total { |
|
752 float: left; |
|
753 color: #b2b2b2; |
|
754 } |
|
755 |
|
756 .Ldt-Ctrl-Sound { |
|
757 margin: 0 2px; |
|
758 } |
|
759 |
|
760 .Ldt-Ctrl-Sound-Full { |
|
761 background-position: -120px 0; |
|
762 } |
|
763 |
|
764 .Ldt-Ctrl-Sound-Full:hover { |
|
765 background-position: -120px -25px; |
|
766 } |
|
767 |
|
768 .Ldt-Ctrl-Sound-Full:active { |
|
769 background-position: -120px -50px; |
|
770 } |
|
771 |
|
772 .Ldt-Ctrl-Sound-Mute { |
|
773 background-position: -150px 0; |
|
774 } |
|
775 |
|
776 .Ldt-Ctrl-Sound-Mute:hover { |
|
777 background-position: -150px -25px; |
|
778 } |
|
779 |
|
780 .Ldt-Ctrl-Sound-Mute:active { |
|
781 background-position: -150px -50px; |
|
782 } |
|
783 |
|
784 .Ldt-Ctrl-Sound-Half { |
|
785 background-position: -180px 0; |
|
786 } |
|
787 |
|
788 .Ldt-Ctrl-Sound-Half:hover { |
|
789 background-position: -180px -25px; |
|
790 } |
|
791 |
|
792 .Ldt-Ctrl-Sound-Half:active { |
|
793 background-position: -180px -50px; |
|
794 } |
|
795 |
|
796 .Ldt-Ctrl-Volume-Control { |
|
797 display: none; |
|
798 position: absolute; |
|
799 background:url('../img/player_gradient.png') repeat-x transparent ; |
|
800 height: 25px; |
|
801 width: 100px; top: 25px; right: -1px; z-index: 100; |
|
802 padding: 0 2px; |
|
803 border: 1px solid #b6b8b8; |
|
804 } |
|
805 |
|
806 .Ldt-Ctrl-Volume-Bar { |
|
807 height: 5px; margin: 9px 3px 0; background: #cccccc; border: 1px solid #999999; border-radius: 2px; |
|
808 } |
|
809 |
|
810 .Ldt-Ctrl-Volume-Control .ui-slider-handle { |
|
811 width: 6px; height: 19px; background: #a8a8a8; border: 1px solid #999999; border-radius: 2px; top: -8px; margin-left: -4px; |
|
812 cursor: pointer; |
|
813 } |
|
814 |
|
815 .Ldt-Ctrl-Volume-Control:hover .ui-slider-handle { |
|
816 background: #F7268E; |
|
817 } |