github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/modules/video.less (about)

     1  /*!
     2   * # Semantic UI - 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              Theme
    15  *******************************/
    16  
    17  @type    : 'module';
    18  @element : 'video';
    19  
    20  @import (multiple) '../../theme.config';
    21  
    22  /*******************************
    23              Video
    24  *******************************/
    25  
    26  .ui.video {
    27    position: relative;
    28    background-color: @background;
    29    position: relative;
    30    max-width: 100%;
    31    padding-bottom: 56.25%;
    32    height: 0px;
    33    overflow: hidden;
    34  }
    35  
    36  /*--------------
    37       Content
    38  ---------------*/
    39  
    40  /* Placeholder Image */
    41  .ui.video .placeholder {
    42    background-color: @placeholderBackground;
    43  }
    44  
    45  /* Play Icon Overlay */
    46  .ui.video .play {
    47    cursor: pointer;
    48    position: absolute;
    49    top: 0px;
    50    left: 0px;
    51    z-index: 10;
    52  
    53    width: 100%;
    54    height: 100%;
    55  
    56    opacity: @playOpacity;
    57    transition: opacity 0.3s;
    58  }
    59  .ui.video .play.icon:before {
    60    position: absolute;
    61    top: 50%;
    62    left: 50%;
    63    z-index: 11;
    64  
    65    background: @playBackground;
    66  
    67    width: (@playSize + @playBorderSize);
    68    height: (@playSize + @playBorderSize);
    69    line-height: (@playSize + @playBorderSize);
    70    border-radius: @playBorderRadius;
    71  
    72    color: @playColor;
    73    font-size: @playSize;
    74    text-shadow: @playShadow;
    75    transform: translateX(-50%) translateY(-50%);
    76  }
    77  
    78  .ui.video .placeholder {
    79    position: absolute;
    80    top: 0px;
    81    left: 0px;
    82    display: block;
    83    width: 100%;
    84    height: 100%;
    85  }
    86  
    87  /* IFrame Embed */
    88  .ui.video .embed iframe,
    89  .ui.video .embed embed,
    90  .ui.video .embed object {
    91    position: absolute;
    92    border: none;
    93    width: 100%;
    94    height: 100%;
    95    top: 0px;
    96    left: 0px;
    97    margin: 0em;
    98    padding: 0em;
    99  }
   100  
   101  /*******************************
   102              States
   103  *******************************/
   104  
   105  /*--------------
   106      Hover
   107  ---------------*/
   108  
   109  .ui.video .play:hover {
   110    opacity: @playHoverOpacity;
   111  }
   112  
   113  /*--------------
   114       Active
   115  ---------------*/
   116  
   117  .ui.video.active .play,
   118  .ui.video.active .placeholder {
   119    display: none;
   120  }
   121  .ui.video.active .embed {
   122    display: inline;
   123  }
   124  
   125  .loadUIOverrides();