src/css/LdtPlayer.css
branchpopcorn-port
changeset 831 0dd21c298380
parent 828 bcf0c2bdcb8e
child 833 33a5d5882be4
equal deleted inserted replaced
830:18ca612e9ff0 831:0dd21c298380
       
     1 /* Some general styling classes */
       
     2 
       
     3 .Ldt-floatClear {
       
     4     display: block; width: 100%; height: 0; clear: both;
       
     5 }
       
     6 
       
     7 ul.Ldt-floatList {
       
     8     padding: 0; margin: 0; list-style: none;
       
     9 }
       
    10 
       
    11 .Ldt-floatList li {
       
    12     float: left;
       
    13 }
       
    14 
       
    15 
       
    16 /* */
       
    17 
     1 #demo-frame > div.demo { padding: 5px !important; };
    18 #demo-frame > div.demo { padding: 5px !important; };
     2 
    19 
     3 button.ui-button-icon-only  {
    20 button.ui-button-icon-only  {
     4   height:1.5em;
    21   height:1.5em;
     5   width:1.5em;
    22   width:1.5em;
   137   display:none
   154   display:none
   138 }
   155 }
   139 
   156 
   140 /* player */
   157 /* player */
   141 .Ldt-controler {
   158 .Ldt-controler {
   142   font-size: 62.5%;
   159   font-size: 10px;
   143   font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
   160   font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
   144   background:url('imgs/player_gradient.png') repeat-x transparent ;
   161   background:url('imgs/player_gradient.png') repeat-x transparent ;
   145   height: 25px;
   162   height: 25px;
   146   border-top: 1px solid #b6b8b8;
   163   border: 1px solid #b6b8b8;
   147   border-bottom: 1px solid #b6b8b8;
       
   148 }
   164 }
   149 
   165 
   150 
   166 
   151 .Ldt-LeftPlayerControls {
   167 .Ldt-LeftPlayerControls {
   152   float:left;
   168   float:left;
   154 
   170 
   155 .Ldt-RightPlayerControls {
   171 .Ldt-RightPlayerControls {
   156   float: right;
   172   float: right;
   157 }
   173 }
   158 
   174 
   159 .Ldt-button {
   175 .Ldt-Ctrl-button {
   160   border-left: 1px solid #b6b8b8;
   176   float: left;
   161   float: left;
   177   width: 30px; height: 25px;
       
   178   background: url('imgs/player-sprites.png');
   162   cursor: pointer;
   179   cursor: pointer;
   163  
   180 }
       
   181 
       
   182 .Ldt-Ctrl-spacer {
       
   183     float: left; width: 1px; height: 25px; background: #b6b8b8;
   164 }
   184 }
   165 
   185 
   166 .Ldt-CtrlPlay {
   186 .Ldt-CtrlPlay {
   167 
   187   margin: 0 15px;
       
   188 }
       
   189 
       
   190 .Ldt-CtrlPlay-PlayState {
   168   background-position: 0 0;
   191   background-position: 0 0;
   169   width: 59px;
   192 }
   170   height: 25px;
   193 
   171 }
   194 .Ldt-CtrlPlay-PlayState:hover {
   172 
   195   background-position: 0 -25px;
   173 .Ldt-CtrlPlay-PlayState {
   196 }
   174   background:url('imgs/play_sprite.png') no-repeat transparent ;
   197 
       
   198 .Ldt-CtrlPlay-PlayState:active {
       
   199   background-position: 0 -50px;
   175 }
   200 }
   176 
   201 
   177 .Ldt-CtrlPlay-PauseState {
   202 .Ldt-CtrlPlay-PauseState {
   178   background:url('imgs/pause_sprite.png') no-repeat transparent ;
   203   background-position: -30px 0;
   179 }
   204 }
   180 
   205 
   181 .Ldt-CtrlPlay:hover {
   206 .Ldt-CtrlPlay-PauseState:hover {
   182   background-position: 0 -25px;
   207   background-position: -30px -25px;
   183 }
   208 }
   184 
   209 
   185 .Ldt-CtrlPlay:active {
   210 .Ldt-CtrlPlay-PauseState:active {
   186   background-position: 0 -50px;
   211   background-position: -30px -50px;
   187 }
   212 }
       
   213 
   188 
   214 
   189 .Ldt-CtrlAnnotate {
   215 .Ldt-CtrlAnnotate {
   190   background:url('imgs/annotate_sprite.png') no-repeat scroll 0 0 transparent ;
   216   margin: 0 2px;
   191   width: 33px;
   217   background-position: -60px 0;
   192   height: 25px;
       
   193   border-right: 1px solid #b6b8b8;
       
   194   float: left;
       
   195 }
   218 }
   196 
   219 
   197 .Ldt-CtrlAnnotate:hover {
   220 .Ldt-CtrlAnnotate:hover {
   198   background-position: 0 -25px;
   221   background-position: -60px -25px;
   199 }
   222 }
   200 
   223 
   201 .Ldt-CtrlAnnotate:active {
   224 .Ldt-CtrlAnnotate:active {
   202   background-position: 0 -50px;
   225   background-position: -60px -50px;
   203 }
   226 }
   204 
   227 
   205 .Ldt-CtrlSearch {
   228 .Ldt-CtrlSearch {
   206   background:url('imgs/search_sprite.png') no-repeat scroll 0 0 transparent ;
   229   margin: 0 2px;
   207   width: 33px;
   230   background-position: -90px 0;
   208   height: 25px;
       
   209   border-right: 1px solid #b6b8b8;
       
   210   float: left;
       
   211   border-left: none;
       
   212 }
   231 }
   213 
   232 
   214 .Ldt-CtrlSearch:hover {
   233 .Ldt-CtrlSearch:hover {
   215   background-position: 0 -25px;
   234   background-position: -90px -25px;
   216 }
   235 }
   217 
   236 
   218 .Ldt-CtrlSearch:active {
   237 .Ldt-CtrlSearch:active {
   219   background-position: 0 -50px;
   238   background-position: -90px -50px;
   220 }
   239 }
   221 
   240 
   222 .LdtSearch {
   241 .LdtSearch {
   223   display: none;
   242   display: none;
   224   width: 165px;
   243   width: 165px;
   228   float: left;
   247   float: left;
   229   text-align: center;
   248   text-align: center;
   230 }
   249 }
   231 
   250 
   232 .Ldt-Time {
   251 .Ldt-Time {
   233   position: inherit;
   252   float: left;
   234   float: left;
   253   margin: 5px;
   235   border-right: 1px solid #b6b8b8;
       
   236   height: 25px;
       
   237   padding-right: 2px;
       
   238   font-size: 12px;
   254   font-size: 12px;
   239   font-family: Arial, Verdana, sans-serif;
   255   font-family: Arial, Verdana, sans-serif;
   240 }
   256 }
   241 
   257 
   242 .Ldt-ElapsedTime {
   258 .Ldt-ElapsedTime {
   243   margin-top: 4px;
       
   244   margin-right: 2px;
       
   245   float: left;
   259   float: left;
   246   color: #4a4a4a;
   260   color: #4a4a4a;
   247 }
   261 }
   248 
   262 
   249 .Ldt-TimeSeparator {
   263 .Ldt-TimeSeparator {
   250   margin-top: 4px;      
   264   margin: 0 4px;      
   251   float: left;
   265   float: left;
   252   padding-left: 1px;
       
   253   padding-right: 1px;
       
   254 }
   266 }
   255 
   267 
   256 .Ldt-TotalTime {
   268 .Ldt-TotalTime {
   257   margin-top: 4px;
       
   258   margin-left: 2px;
       
   259   float: left;
   269   float: left;
   260   color: #b2b2b2; 
   270   color: #b2b2b2; 
   261 }
   271 }
   262 
   272 
   263 .Ldt-CtrlSound {
   273 .Ldt-CtrlSound {
   264   width: 33px;
   274   margin: 0 2px;
   265   height: 25px;
       
   266   border-right: 1px solid #b6b8b8;
       
   267   float: right;
       
   268   border-left: none;
       
   269 }
   275 }
   270 
   276 
   271 .Ldt-CtrlSound-SoundState {
   277 .Ldt-CtrlSound-SoundState {
   272   background:url('imgs/sound_sprite.png') no-repeat scroll 0 0 transparent ;
   278   background-position: -120px 0;
       
   279 }
       
   280 
       
   281 .Ldt-CtrlSound-SoundState:hover {
       
   282   background-position: -120px -25px;
       
   283 }
       
   284 
       
   285 .Ldt-CtrlSound-SoundState:active {
       
   286   background-position: -120px -50px;
   273 }
   287 }
   274 
   288 
   275 .Ldt-CtrlSound-MuteState {
   289 .Ldt-CtrlSound-MuteState {
   276   background:url('imgs/mute_sprite.png') no-repeat scroll 0 0 transparent ;
   290   background-position: -150px 0;
   277 }
   291 }
   278 
   292 
   279 .Ldt-CtrlSound:hover {
   293 .Ldt-CtrlSound-MuteState:hover {
   280   background-position: 0 -25px;
   294   background-position: -150px -25px;
   281 }
   295 }
   282 
   296 
   283 .Ldt-CtrlSound:active {
   297 .Ldt-CtrlSound-MuteState:active {
   284   background-position: 0 -50px;
   298   background-position: -150px -50px;
   285 }
   299 }
   286 /*
   300 
   287 .Ldt-CtrlSound {
       
   288   float: right;
       
   289   border-left: none;
       
   290   height: 25px;
       
   291   top: 7px;
       
   292   position: inherit;
       
   293 }
       
   294 */    
       
   295 .Ldt-cleaner {
   301 .Ldt-cleaner {
   296   clear:both;
   302   clear:both;
   297 }
   303 }
   298 
   304 
   299 /* Arrow Widget */
   305 /* Arrow Widget */
   650   font-size: 12pt;
   656   font-size: 12pt;
   651   color : #ff5589;  
   657   color : #ff5589;  
   652   float: left;
   658   float: left;
   653 }
   659 }
   654 
   660 
   655 .Ldt-createAnnotation-Container {  
   661 .Ldt-createAnnotation-Container {
   656   display: table;
   662   float: left; width: 100%; clear: both;
   657   border-collapse: collapse;
   663 }
   658   width: 100%;
   664 
   659 }
   665 .Ldt-createAnnotation-userAvatar { 
   660 
   666   float: right; 
   661 .Ldt-createAnnotation-userAvatar {  
       
   662   width: 48px;
   667   width: 48px;
   663   display: table-cell;
   668   height: 48px;
   664   vertical-align: top;
   669   margin: 7px 0;
   665 }
   670   border: 1px solid #babcbc;
   666 
   671 }
   667 .Ldt-createAnnotation-userAvatar img {  
   672 
       
   673 .Ldt-createAnnotation-userAvatar img { 
       
   674   float: right; 
   668   display: block;
   675   display: block;
   669   border: 1px solid #babcbc;
   676   max-width: 100%;
       
   677   max-height: 100%;
   670 }
   678 }
   671 
   679 
   672 .Ldt-createAnnotation-profileArrow {
   680 .Ldt-createAnnotation-profileArrow {
   673   display: table-cell;
   681   float: right;
   674   vertical-align: top;
   682   vertical-align: top;
   675   height: 48px;
   683   height: 48px;
   676   width: 15px;
   684   width: 15px;
   677   padding-right: 5px;
   685   margin: 7px 5px;
   678   padding-left: 3px;
   686   background:url('imgs/profile_arrow.png') center no-repeat;
   679   background:url('imgs/profile_arrow.png');
       
   680   background-repeat: no-repeat;
       
   681   background-position: center;
       
   682 }
   687 }
   683 
   688 
   684 .Ldt-createAnnotation-Description {
   689 .Ldt-createAnnotation-Description {
   685   display: table-cell;   
   690   float: left;
   686   width: 100%;
   691   width: 520px;
   687   height: 48px;  
   692   height: 56px; padding: 2px;
   688   vertical-align: top;
   693   resize: none;
   689   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   694 }
   690   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   695 
   691   box-sizing: border-box;         /* Opera/IE 8+ */
   696 .Ldt-createAnnotation-btnblock {
   692 }
   697    float: left; width: 450px;  margin: 5px 0;
   693 
   698 }
   694 .Ldt-createAnnotation-present-keyword {
   699 
       
   700 .Ldt-createAnnotation-btnblock label {
       
   701     float: left; margin-left: 12px; margin: 2px 8px 2px 0; font-size: 12px;
       
   702 }
       
   703 
       
   704 .Ldt-createAnnotation-keyword-button {
   695   border: 1px solid #ffffff;
   705   border: 1px solid #ffffff;
   696   background-color: #217bcb;
   706   background-color: #217bcb;
   697   color: #ffffff;
   707   color: #ffffff;
   698   padding: 3px;
   708   padding: 3px 4px;
   699   padding-left: 4px;
       
   700   padding-right: 4px;
       
   701   cursor: pointer;
   709   cursor: pointer;
   702 }
   710 }
   703 
   711 
   704 .Ldt-createAnnotation-absent-keyword {
   712 .Ldt-createAnnotation-active-button .Ldt-createAnnotation-keyword-button {
   705   border: 1px solid #ffffff;
       
   706   background-color: #d93c71;
   713   background-color: #d93c71;
   707   color: #ffffff;
       
   708   padding: 3px;
       
   709   padding-left: 4px;
       
   710   padding-right: 4px;
       
   711   cursor: pointer;
       
   712 }
   714 }
   713 
   715 
   714 .Ldt-createAnnotation-submitButton {
   716 .Ldt-createAnnotation-submitButton {
   715   float: right;
   717   float: right;
   716   background-color: #d93c71;
   718   background-color: #d93c71;
   720   background-repeat: no-repeat;
   722   background-repeat: no-repeat;
   721   height: 48px;
   723   height: 48px;
   722   width: 48px;
   724   width: 48px;
   723   position: relative;
   725   position: relative;
   724   margin-top: 3px;
   726   margin-top: 3px;
       
   727   padding: 28px 0 0;
       
   728   font-size: 13px;
       
   729   border: none;
       
   730   text-align: center;
   725 }
   731 }
   726 
   732 
   727 .Ldt-createAnnotation-endScreen {
   733 .Ldt-createAnnotation-endScreen {
   728   background-color: #ffffff;
   734   background-color: #ffffff;
   729   margin-left: 5px;
   735   margin-left: 5px;
   748   right: 0px;
   754   right: 0px;
   749   background:url('imgs/minimize.png');
   755   background:url('imgs/minimize.png');
   750 }
   756 }
   751 
   757 
   752 /* polemic tweet annotation buttons */
   758 /* polemic tweet annotation buttons */
   753 .Ldt-createAnnotation-polemics {
       
   754   padding-top: 2px;
       
   755 }
       
   756 
   759 
   757 .Ldt-createAnnotation-polemic-button {
   760 .Ldt-createAnnotation-polemic-button {
   758   margin: 0;
   761   margin: 0;
   759   border: 0;
   762   border: 0;
   760   padding: 0;
   763   padding: 0;
   761   margin-right: 2px;
   764   margin-right: 2px;
   762   width: 38px;
   765   width: 38px;
   763   height: 26px;
   766   height: 26px;
   764   text-indent: -999px;
   767   text-indent: -999px;
   765   background: url(imgs/polemic_buttons_sprite.png);
   768   background: url(imgs/polemic_buttons_sprite.png);
       
   769   cursor: pointer;
   766 }
   770 }
   767 
   771 
   768 .Ldt-createAnnotation-polemic-positive:hover {
   772 .Ldt-createAnnotation-polemic-positive:hover {
   769     background-position: 0 -26px;
   773     background-position: 0 -26px;
   770 }
   774 }
   771 .Ldt-createAnnotation-polemic-positive.Ldt-createAnnotation-polemic-active {
   775 .Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-positive {
   772     background-position: 0 -52px;
   776     background-position: 0 -52px;
   773 }
   777 }
   774 
   778 
   775 .Ldt-createAnnotation-polemic-negative {
   779 .Ldt-createAnnotation-polemic-negative {
   776     background-position: -38px 0;
   780     background-position: -38px 0;
   777 }
   781 }
   778 .Ldt-createAnnotation-polemic-negative:hover {
   782 .Ldt-createAnnotation-polemic-negative:hover {
   779     background-position: -38px -26px;
   783     background-position: -38px -26px;
   780 }
   784 }
   781 .Ldt-createAnnotation-polemic-negative.Ldt-createAnnotation-polemic-active {
   785 .Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-negative {
   782     background-position: -38px -52px;
   786     background-position: -38px -52px;
   783 }
   787 }
   784 
   788 
   785 .Ldt-createAnnotation-polemic-reference {
   789 .Ldt-createAnnotation-polemic-reference {
   786     background-position: -76px 0;
   790     background-position: -76px 0;
   787 }
   791 }
   788 .Ldt-createAnnotation-polemic-reference:hover {
   792 .Ldt-createAnnotation-polemic-reference:hover {
   789     background-position: -76px -26px;
   793     background-position: -76px -26px;
   790 }
   794 }
   791 .Ldt-createAnnotation-polemic-reference.Ldt-createAnnotation-polemic-active {
   795 .Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-reference {
   792     background-position: -76px -52px;
   796     background-position: -76px -52px;
   793 }
   797 }
   794 
   798 
   795 .Ldt-createAnnotation-polemic-question {
   799 .Ldt-createAnnotation-polemic-question {
   796     background-position: -114px 0;
   800     background-position: -114px 0;
   797 }
   801 }
   798 .Ldt-createAnnotation-polemic-question:hover {
   802 .Ldt-createAnnotation-polemic-question:hover {
   799     background-position: -114px -26px;
   803     background-position: -114px -26px;
   800 }
   804 }
   801 .Ldt-createAnnotation-polemic-question.Ldt-createAnnotation-polemic-active {
   805 .Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-question {
   802     background-position: -114px -52px;
   806     background-position: -114px -52px;
   803 }
   807 }
   804 
   808 
   805 .Ldt-createAnnotation-spinner {
   809 .Ldt-createAnnotation-spinner {
   806 	display: inline;
   810 	display: inline;