github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/video.css (about)

     1  /*!
     2   * # Semantic UI x.x - Video
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributors
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  
    13  /*******************************
    14              Video
    15  *******************************/
    16  
    17  .ui.video {
    18    background-color: #dddddd;
    19    position: relative;
    20    max-width: 100%;
    21    padding-bottom: 56.25%;
    22    height: 0px;
    23    overflow: hidden;
    24  }
    25  
    26  /*--------------
    27       Content
    28  ---------------*/
    29  
    30  
    31  /* Placeholder Image */
    32  .ui.video .placeholder {
    33    background-color: #333333;
    34  }
    35  
    36  /* Play Icon Overlay */
    37  .ui.video .play {
    38    cursor: pointer;
    39    position: absolute;
    40    top: 0px;
    41    left: 0px;
    42    z-index: 10;
    43    width: 100%;
    44    height: 100%;
    45    opacity: 0.8;
    46    -webkit-transition: opacity 0.3s;
    47            transition: opacity 0.3s;
    48  }
    49  .ui.video .play.icon:before {
    50    position: absolute;
    51    top: 50%;
    52    left: 50%;
    53    z-index: 11;
    54    background: rgba(0, 0, 0, 0.3);
    55    width: 8rem;
    56    height: 8rem;
    57    line-height: 8rem;
    58    border-radius: 500rem;
    59    color: #ffffff;
    60    font-size: 8rem;
    61    text-shadow: none;
    62    -webkit-transform: translateX(-50%) translateY(-50%);
    63        -ms-transform: translateX(-50%) translateY(-50%);
    64            transform: translateX(-50%) translateY(-50%);
    65  }
    66  .ui.video .placeholder {
    67    position: absolute;
    68    top: 0px;
    69    left: 0px;
    70    display: block;
    71    width: 100%;
    72    height: 100%;
    73  }
    74  
    75  /* IFrame Embed */
    76  .ui.video .embed iframe,
    77  .ui.video .embed embed,
    78  .ui.video .embed object {
    79    position: absolute;
    80    border: none;
    81    width: 100%;
    82    height: 100%;
    83    top: 0px;
    84    left: 0px;
    85    margin: 0em;
    86    padding: 0em;
    87  }
    88  
    89  
    90  /*******************************
    91              States
    92  *******************************/
    93  
    94  
    95  /*--------------
    96      Hover
    97  ---------------*/
    98  
    99  .ui.video .play:hover {
   100    opacity: 1;
   101  }
   102  
   103  /*--------------
   104       Active
   105  ---------------*/
   106  
   107  .ui.video.active .play,
   108  .ui.video.active .placeholder {
   109    display: none;
   110  }
   111  .ui.video.active .embed {
   112    display: inline;
   113  }
   114  
   115  
   116  /*******************************
   117          Video Overrides
   118  *******************************/
   119  
   120  
   121  
   122  /*******************************
   123           Site Overrides
   124  *******************************/
   125