← Back to branch summary

~canonical-website-editors/canonical-video-player/trunk

« back to all changes in this revision

Viewing changes to css/style.css

  • Committer: deadlight at bgr0
  • Date: 2014-02-25 16:40:51 UTC
  • Revision ID: deadlight@bgr0.com-20140225164051-54ed0yye8kvlf5o2
sharing button styling and js

Show diffs side-by-side

added added

removed removed

Lines of Context:
css/style.css
6
6
 
7
7
/* PLAYER */
8
8
 
 
9
.start-hidden {
 
10
    display: none;
 
11
}
9
12
 
10
13
/* Fading sytles, used to fade control bar. */
11
14
.vjs-fade-in {
40
43
    transition-delay: 0s;
41
44
}
42
45
 
 
46
 
43
47
/* Initial play button*/
44
48
 
45
49
.vjs-default-skin .vjs-big-play-button {
429
433
.vjs-default-skin .vjs-duration { display: none; }
430
434
.vjs-time-divider { display: none; }
431
435
 
 
436
/* Social Sharing Button */
 
437
.vjs-default-skin .sharing {
 
438
    background-image: url(../images/icon-share-pressed.png);
 
439
    background-image: url(../images/icon-share-pressed.svg);
 
440
    background-repeat: no-repeat;
 
441
    background-position: center;
 
442
    width: 22px;
 
443
    cursor: pointer;
 
444
    position: absolute;
 
445
    top: auto;
 
446
    bottom: 0;
 
447
    right: 80px;
 
448
}
 
449
 
 
450
.vjs-default-skin .sharing.hide:hover {
 
451
    background-image: url(../images/icon-share-pressed.png);
 
452
    background-image: url(../images/icon-share-pressed.svg);
 
453
}
 
454
 
 
455
.vjs-default-skin .sharing.hide {
 
456
    background-image: url(../images/icon-share.png);
 
457
    background-image: url(../images/icon-share.svg);
 
458
}
 
459
 
 
460
.vjs-default-skin .vjs-fade-out .sharing .share-tooltip:after,
 
461
.vjs-default-skin .vjs-fade-out .sharing .share-tooltip * {
 
462
    opacity: 0;
 
463
    -webkit-transition: opacity 0.2s ease-out;
 
464
    -moz-transition: opacity 0.2s ease-out;
 
465
    -ms-transition: opacity 0.2s ease-out;
 
466
    -o-transition: opacity 0.2s ease-out;
 
467
    transition: opacity 0.2s ease-out;
 
468
}
 
469
 
 
470
.vjs-default-skin .vjs-fade-in .sharing .share-tooltip:after,
 
471
.vjs-default-skin .vjs-fade-in .sharing .share-tooltip *  {
 
472
    opacity: 1;
 
473
    -webkit-transition: opacity 0.2s ease-out;
 
474
    -moz-transition: opacity 0.2s ease-out;
 
475
    -ms-transition: opacity 0.2s ease-out;
 
476
    -o-transition: opacity 0.2s ease-out;
 
477
    transition: opacity 0.2s ease-out;
 
478
}
 
479
 
 
480
.vjs-default-skin .sharing.hide .share-tooltip {
 
481
    -webkit-animation: tooltip-out 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
 
482
    -moz-animation: tooltip-out 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
 
483
    -ms-animation: tooltip-out 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
 
484
    -o-animation: tooltip-out 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
 
485
    animation: tooltip-out 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
 
486
}
 
487
 
 
488
.share-tooltip {
 
489
    position: absolute;
 
490
    width: 40px;
 
491
    bottom: 45px;
 
492
    right: -10px;
 
493
    -webkit-animation: tooltip-in 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
 
494
    -moz-animation: tooltip-in 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
 
495
    -ms-animation: tooltip-in 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
 
496
    -o-animation: tooltip-in 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
 
497
    animation: tooltip-in 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
 
498
}
 
499
.share-tooltip ul {
 
500
    margin: 0;
 
501
    padding: 0;
 
502
    overflow: hidden;
 
503
    border-radius: 4px;
 
504
    background-color: #fff;
 
505
    list-style-type: none;
 
506
    list-style-position: inside;
 
507
}
 
508
.share-tooltip li {
 
509
    width: 40px;
 
510
    height: 39px;
 
511
    border-top: 1px solid rgba(0,0,0,0.1);
 
512
/*    -webkit-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
513
    -moz-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
514
    -o-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
515
    transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);*/
 
516
}
 
517
.share-tooltip li a{
 
518
    display: block;
 
519
    width: 100%;
 
520
    height: 100%;
 
521
}
 
522
.share-tooltip li:first-child {
 
523
    border-top: none;
 
524
}
 
525
.share-tooltip li#email {
 
526
    background: url(../images/icon-share-email.png) no-repeat center;
 
527
    background: url(../images/icon-share-email.svg) no-repeat center;    
 
528
}
 
529
.share-tooltip li#email:hover {
 
530
    background: url(../images/icon-share-email-pressed.png) no-repeat center;
 
531
    background: url(../images/icon-share-email-pressed.svg) no-repeat center;
 
532
}
 
533
.share-tooltip li#google {
 
534
    background: url(../images/icon-share-google.png) no-repeat center;
 
535
    background: url(../images/icon-share-google.svg) no-repeat center;
 
536
}
 
537
.share-tooltip li#google:hover {
 
538
    background: url(../images/icon-share-google-pressed.png) no-repeat center;
 
539
    background: url(../images/icon-share-google-pressed.svg) no-repeat center;
 
540
}
 
541
.share-tooltip li#twitter {
 
542
    background: url(../images/icon-share-twitter.png) no-repeat center;
 
543
    background: url(../images/icon-share-twitter.svg) no-repeat center;
 
544
}
 
545
.share-tooltip li#twitter:hover {
 
546
    background: url(../images/icon-share-twitter-pressed.png) no-repeat center;
 
547
    background: url(../images/icon-share-twitter-pressed.svg) no-repeat center;
 
548
}
 
549
.share-tooltip li#facebook {
 
550
    background: url(../images/icon-share-facebook.png) no-repeat center;
 
551
    background: url(../images/icon-share-facebook.svg) no-repeat center;
 
552
}
 
553
.share-tooltip li#facebook:hover {
 
554
    background: url(../images/icon-share-facebook-pressed.png) no-repeat center;
 
555
    background: url(../images/icon-share-facebook-pressed.svg) no-repeat center;
 
556
}
 
557
.share-tooltip li#email:hover, .share-tooltip li#google:hover, .share-tooltip li#twitter:hover, .share-tooltip li#facebook:hover {
 
558
    background-color: rgba(0,0,0,0.05);
 
559
}
 
560
.share-tooltip:after {
 
561
    content: ' ';
 
562
    position: absolute;
 
563
    margin: auto;
 
564
    left: 0; right: 0;
 
565
    bottom: -4px;
 
566
    width: 12px;
 
567
    height: 4px;
 
568
    background: url(../images/player-pointer.png) no-repeat center;
 
569
    background: url(../images/player-pointer.svg) no-repeat center;
 
570
}
432
571
 
433
572
/* overlay, steps - in video */
434
573
.video .overlay {
597
736
}
598
737
 
599
738
/* page content */
600
 
.step-list li a {
 
739
.list.step-list {
 
740
    margin-top: 40px;
 
741
}
 
742
 
 
743
.list.step-list li {
 
744
    margin: 0px 40px;
 
745
}
 
746
 
 
747
.list.step-list li a {
601
748
    font-size: 23px;
 
749
    display: block;
 
750
    padding-left: 55px;
602
751
}
603
752
 
604
 
.step-list li a span {
 
753
.list.step-list li a span.bullet {
605
754
    -webkit-border-radius: 50%;
606
755
    -moz-border-radius: 50%;
607
756
    border-radius: 50%;
608
 
    /*background-color: #DD4814;*/
 
757
    background-color: #DD4814;
609
758
    background-color: #ccc;
610
759
    color: #fff;
 
760
    display: block;
 
761
    text-align: center;
 
762
    height: 40px;
 
763
    width: 40px;
 
764
    line-height: 40px;
 
765
    position: absolute;
 
766
    left: 40px;
 
767
    }
 
768
 
 
769
.list.step-list li a span.title,
 
770
.list.step-list li a span.details {
611
771
    display: inline-block;
612
 
    text-align: center;
613
 
    height: 40px;
614
 
    width: 40px;
615
 
    line-height: 40px;
616
 
}
 
772
}
 
773
 
 
774
.list.step-list li a span.details {
 
775
    font-size: 16px;
 
776
}
 
777
 
 
778
/*Tooltip transitions*/
 
779
 
 
780
@-webkit-keyframes tooltip-in {
 
781
    from { bottom: 35px; opacity: 0; }
 
782
    to { bottom: 45px; opacity: 1; }
 
783
}
 
784
@-moz-keyframes tooltip-in {
 
785
    from { bottom: 35px; opacity: 0; }
 
786
    to { bottom: 45px; opacity: 1; }
 
787
}
 
788
@-ms-keyframes tooltip-in {
 
789
    from { bottom: 35px; opacity: 0; }
 
790
    to { bottom: 45px; opacity: 1; }
 
791
}
 
792
@-o-keyframes tooltip-in {
 
793
    from { bottom: 35px; opacity: 0; }
 
794
    to { bottom: 45px; opacity: 1; }
 
795
}
 
796
@keyframes tooltip-in {
 
797
    from { bottom: 35px; opacity: 0; }
 
798
    to { bottom: 45px; opacity: 1; }
 
799
}
 
800
 
 
801
@-webkit-keyframes tooltip-out {
 
802
    from { bottom: 45px; opacity: 1; }
 
803
    to { bottom: 35px; opacity: 0; }
 
804
}
 
805
@-moz-keyframes tooltip-out {
 
806
    from { bottom: 45px; opacity: 1; }
 
807
    to { bottom: 35px; opacity: 0; }
 
808
}
 
809
@-ms-keyframes tooltip-out {
 
810
    from { bottom: 45px; opacity: 1; }
 
811
    to { bottom: 35px; opacity: 0; }
 
812
}
 
813
@-o-keyframes tooltip-out {
 
814
    from { bottom: 45px; opacity: 1; }
 
815
    to { bottom: 35px; opacity: 0; }
 
816
}
 
817
@keyframes tooltip-out {
 
818
    from { bottom: 45px; opacity: 1; }
 
819
    to { bottom: 35px; opacity: 0; }
 
820
}
 
 
b'\\ No newline at end of file'