src/css/LdtPlayer.css
author hamidouk
Mon, 28 Nov 2011 17:12:56 +0100
branchpopcorn-port
changeset 344 9799f50b7ac5
parent 339 a7e288ce7957
child 345 8a088f7daa66
permissions -rw-r--r--
WIP - integrating sprites for the play button.

    #demo-frame > div.demo { padding: 5px !important; };

    button.ui-button-icon-only  {
      height:1.5em;
      width:1.5em;
    }

    #Ldt-loader {
      background:url(imgs/loader.gif) no-repeat;
      width:20px;
      height:16px;
      float:left;
    }

   /* general class for all buttons */
   .Ldt-button {

   }

   .Ldt-AnnotationsWidget {
      font-size: 62.5%;
      font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
      background-color:#eeeeee;
      padding:5px;
      background:url('imgs/wire_pattern.png') repeat scroll transparent ;
      border-color: #b6b8b8;
      border-width: 1px;
      border-style: solid;
    }

    .Ldt-SegmentsWidget {
      background-color: #b6b8b7;
      overflow: auto; /* clear the floats */
    }

    .Ldt-iri-chapter{
      float: left;
      height: 10px;
    }

    .tooltip {
      display:none;
      background:transparent url(imgs/white_arrow_mini.png);
      font-size:12px;
      height:55px;
      width:180px;
      padding:10px;
      padding-left:15px;
      padding-top:15px;
      padding-right:15px;
      color:#000;
      font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    }
    #Ldt-Root{
      font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    }
    #Ldt-Hat{
      height:3px;
    }

    #Ldt-Annotations{
      padding-left:5px;
      width:470px;
      float:left;
      font-size: 62.5%;
    }

    .Ldt-SaTitle{
      padding-top:2px;
      padding-bottom:5px;
      font-size:18px;
      color : #0068c4;
    }
    #Ldt-Show-Arrow{
      position:relative;
      background:url(imgs/grey_arrow_Show.png);
      width:27px;
      height:13px;
      margin-top:12px;
      margin-left:-10px;
      z-index:999;
    }


    .Ldt-SaDescription{
      font-size:12px;
    }
    #Ldt-Show-Tags{
      position:relative;
      height:13px;
      margin-top:-10px;
      border: solid 1px #000;
    }
    #Ldt-ShowAnnotation-video{
      position:absolute;
      z-index: 999;
      padding:5px;
      background:url(imgs/transBlack.png);
      font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
      color:#FFF;
    }
    #Ldt-ShowAnnotation-audio{
      position:relative;
      padding:5px;
      background-color:#cfcfcf;
      font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
      color:#4D4D4D;
    }
    .Ldt-SaKeyword{
      background-color:#b9b9b9;
      color:#4D4D4D;
      padding:5px;
      font-weight:bold;
      text-align:left;
      float:left;
      font-size:10px;
    }
    #Ldt-SaShareTools{
      text-align:right;
      float:right;
    }


    #Ldt-PlaceHolder{
      position:absolue;
      float:none;
    }

    .Ldt-Segments{
      float:left;
      font-size: 62.5%;
    }

    .Ldt-mode-radio{
      visibility:hidden;
      height:0px;
      display:none
    }

    /* player */
    .Ldt-controler {
      font-size: 62.5%;
      font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
      background:url('imgs/player_gradient.png') repeat-x transparent ;
      height: 25px;
      border-top: 1px solid #b6b8b8;
      border-bottom: 1px solid #b6b8b8;
    }

 
    .Ldt-LeftPlayerControls {
      float:left;
    }

    .Ldt-RightPlayerControls {
      float: right;
    }

    /* we need a container to contain our buttons because we want
       them centered and there's no way to position them this way
       while at the same time using sprites 
    */
    .Ldt-ButtonContainer {
      width: 50px;
      height: 25px;
      border-left: 1px solid #b6b8b8;
      border-right: 1px solid #b6b8b8;
      float: left;
    }

    .Ldt-CtrlPlay {
      background:url('imgs/play_sprite.png') no-repeat transparent ;
      background-position: 0 0;
      width: 16px;
      height: 25px;
      margin: 0 auto;
    }

    .Ldt-CtrlPlay:hover {
      background:url('imgs/play_sprite.png') no-repeat transparent ;
      background-position: 0 -25px;
      width: 16px;
      height: 25px;
      margin: 0 auto;
    }

    .Ldt-CtrlNext {
      background:url('imgs/play_sprite.png') no-repeat scroll 0 0 transparent ;
      background-position: center;
      width: 50px;
      height: 25px;
      border-right: 1px solid #b6b8b8;
      float: left;
    }


    .Ldt-CtrlSearch {
      background:url('imgs/search.png') no-repeat scroll 0 0 transparent ;
      background-position: center;
      width: 50px;
      height: 25px;
      border-right: 1px solid #b6b8b8;
      float: left;
    }

    .Ldt-Time {
      position: inherit;
      float: left;
      border-right: 1px solid #b6b8b8;
      height: 25px;
      padding-right: 2px;
    }
    
    .Ldt-ElapsedTime {
      margin-top: 5px;
      float: left;
      color: #4a4a4a;
    }
    
    .Ldt-TimeSeparator {
      margin-top: 5px;
      float: left;
    }

    .Ldt-TotalTime {
      margin-top: 5px;
      float: left;
      color: #b2b2b2; 
    }

    .Ldt-CtrlSound {
      margin-top: 5px;
      float: right;
      height: 25px;
      top: 7px;
      position: inherit;
    }
    .Ldt-cleaner {
      clear:both;
    }

    /* Arrow Widget */
    .Ldt-arrowWidget {
      position: relative;
      background:url('imgs/arrow.png') no-repeat scroll 0 0 transparent ;
      height:16px;
      width:27px;
      margin-bottom: -2px;
      left: 0%;
    }
 
    .cleaner {
      clear:both;
    }

    .share {
      background:url('imgs/widget20.png') no-repeat scroll 0 0 transparent ;
      display:block;
      height:16px;
      line-height:16px !important;
      overflow:hidden;
      width:16px;
      float:left;
      cursor:pointer;
      margin:2px;
    }
    .shareFacebook{
      background-position:0 -704px;
    }
    .shareMySpace{
      background-position:0 -736px;
    }
    .shareTwitter{
      background-position:0 -1072px;
    }
    .shareGoogle{
      background-position:0 -752px;
    }
    .shareDelicious{
      background-position:0 -672px;
    }
    .shareJamesPot{
      background-position:0 -1808px;
    }

    .tip{
      position : fixed; /* why not absolute instead of fixed ? because the div containing the tooltip widget is not a subdiv of its parent
                           widget */
      padding : 3px;
      z-index: 10000000000;
      max-width: 200px;
      background: transparent url("http://www.polemictweet.com/images/white_arrow_long.png");
      font-size: 12px;
      height: 125px;
      width: 180px;
      padding: 10px;
      padding-left: 15px;
      padding-top: 15px;
      padding-right: 15px;
      color: black;
      font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
      overflow:hidden;
    }

    /* slider */
    .Ldt-SliderMinimized {
      height: 6px;
    }

    .Ldt-SliderMaximized {
      height: 11px;
    }

    .Ldt-sliderElementMinimized {
      width: 100%;
      height: 5px;
    }

    .Ldt-sliderElementMaximized {
      width: 100%;
      height: 10px;
    }

    .Ldt-sliderBackground  {
      background-color: #B6B8B8;
      position: absolute;
      z-index: 2;
      bottom: 1px;
      width: 100%;
      height: 5px;
 
    }

    .Ldt-sliderForeground  {
      background-color: #747474;
      z-index: 2;
      width: 0px;
      position: absolute;
      bottom: 1px;
      height: 5px;
    }

    .Ldt-sliderPositionMarker {
      position: absolute;
      z-index: 100;
      background-color: blue;
      height: 5px;
      width: 5px;
      top: 0%;
      bottom: 1px;
    }

    .positionMarker {
      position: absolute;
      z-index: 100;
      width: 1px;
      height: 20px;
      background-color: white;
    }

    /* tweet Widget */
    .Ldt-tweetWidget {
      font-size: 62.5%;
      font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
      background:url('imgs/wire_pattern.png') repeat scroll transparent ;
      padding:5px;
      overflow: auto;
    }

    .Ldt-tweetAvatar {
      float: left;
    }

    .Ldt-tweetContents {

    }

    .Ldt-tweetWidgetMinimize {
      float: right;
    }

    /* the styling of a spacer div */
    .Ldt-spacer {
      background-color:#eeeeee;
    }