var canvas = undefined;
var canvasClass = cssPref + 'svg-'+className+'-line';
var vml = this.$TU.vml; //if vml, this class is populated with methods and NOT undefined
+ var round = Math.round;
if(!vml){
canvas = this.createCanvasSvg(waveImgDiv, arrowBaselineWidth);
var path = canvas.childNodes[0]; //note that $J(canvas).find('path') does not work in FF at least 3.5
path.setAttributeNS(null,'class',canvasClass);
this.moveCanvas = function(pixelOffset){
+ pixelOffset = round(pixelOffset);
canvas.setAttributeNS( null, "transform", "translate("+pixelOffset+",0)");
};
this.jQueryCanvas = $J(canvas);
var attributes = vml.getVmlAttr(canvasClass);
canvas.attr(attributes); //Raphael method
this.moveCanvas = function(pixelOffset){
+ pixelOffset = round(pixelOffset);
//for some reason, coordinates inside the VML object are stored by raphael with a zoom of 10:
this.jQueryCanvas.css('left',(10*pixelOffset)+'px');
};
--- /dev/null
+/*
+* Style for the timeside player. The player div is supposed to be of class .ts-player. Change if needed
+* For details, see http://code.google.com/p/timeside/wiki/UiGuide?ts=1308677096&updated=UiGuide#CSS_and_skins
+*/
+
+.ts-player {
+ padding: 0;
+ border: solid 1px #ADADAD;
+ margin-top: 2px;
+}
+
+
+.ts-player .ts-ruler{
+ color: #ADADAD;
+ background-color: #F2F2F2;
+ font-size: 10px;
+ line-height: 13px;
+}
+/*svg style, MUST BE A SINGLE SELECTOR. FOR INSTANCE, THIS DOES NOT WORK WHEN SVG IS NOT SUPPORTED:
+ ".ts-player .ts-ruler .ts-svg-ruler-upper-rect" */
+.ts-svg-ruler-upper-rect{
+ fill: #FFFFFF;
+ stroke-width:0;
+ stroke: #FFFFFF; /*to be sure...*/
+}
+/*svg style, MUST BE A SINGLE SELECTOR. FOR INSTANCE, THIS DOES NOT WORK WHEN SVG IS NOT SUPPORTED:
+ ".ts-player .ts-ruler .ts-svg-ruler-lines"*/
+.ts-svg-ruler-lines{
+ stroke-width:1;
+ stroke: #ADADAD;
+}
+
+/*wave:*/
+.ts-player .ts-wave {
+ height: 130px;
+}
+
+/*.ts-player .ts-viewer .ts-marker {*/
+.ts-player .ts-ruler .ts-marker {
+ padding: 0 0.5em;
+ background: #fff;
+ border: 1px solid #92bdd4;
+ color: #92bdd4;
+ text-decoration: none;
+}
+/*svg style, MUST BE A SINGLE SELECTOR. FOR INSTANCE, THIS DOES NOT WORK WHEN SVG IS NOT SUPPORTED:
+ ".ts-player .ts-wave .ts-image-canvas .ts-svg-marker-line" */
+.ts-svg-marker-line {
+ fill: #92bdd4;
+ stroke-width:0;
+}
+
+/*.ts-player .ts-viewer a.ts-pointer {*/
+.ts-player .ts-ruler a.ts-pointer {
+ color: white ;
+ background-color: #92bde4;
+ padding: 0 0.5em;
+ /*border: solid 1px #92bde4;*/
+
+ text-decoration: none;
+ -moz-border-radius: .3em;
+ -webkit-border-radius: .3em;
+ border-radius: .3em;
+ /*color: #3c4251; #6A0307 !important;*/
+}
+/*svg style, MUST BE A SINGLE SELECTOR. FOR INSTANCE, THIS DOES NOT WORK WHEN SVG IS NOT SUPPORTED:
+ ".ts-player .ts-wave .ts-image-canvas .ts-svg-pointer-line" */
+.ts-svg-pointer-line {
+ fill: #92bde4;
+ stroke-width:0;
+}
+
+.ts-player .ts-wave .ts-image {
+ background: #090e0d ;
+}
+
+.ts-player .ts-control {
+ background: url('img/player_controlbg.png');
+}
+
+ /** display (inline-block) and overflow of a is set inside javascript*/
+.ts-player .ts-control .ts-button {
+ background-repeat: no-repeat;
+ margin:4px;
+ height:21px;
+ width:21px;
+ /* background-position: 0px 0px;*/
+}
+.ts-player .ts-control .ts-button:hover {
+ background-position: 0px -21px;
+}
+.ts-player .ts-control .ts-play {
+ background-image: url('img/play.png');
+}
+
+.ts-player .ts-control .ts-pause {
+ background-image: url('img/pause.png');
+}
+
+.ts-player .ts-control .ts-rewind {
+ background-image: url('img/rewind.png');
+}
+
+.ts-player .ts-control .ts-forward {
+ background-image: url('img/forward.png');
+}
+
+.ts-player .ts-control .ts-set-marker {
+ background-image: url('img/setmarker.png');
+}
+
+.ts-player .ts-control .ts-volume-speaker-on {
+ background-image: url('img/volumeon.png');
+ width:24px;
+}
+.ts-player .ts-control .ts-volume-speaker-off {
+ background-image: url('img/volumeoff.png');
+ width:24px;
+}
+.ts-player .ts-control .ts-volume-bar-container {
+ /*background: url('img/controlbg-inverted.png');
+ background-position: -3px left;
+ background-repeat: repeat-x;*/
+ border: 1px solid #a3a4a7;
+ height:10px;
+ width:42px;
+ margin-top:9px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+
+}
+.ts-player .ts-control .ts-volume-bar { /*width will be changed inside the code*/
+ background-color: #ccc;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+}
+/*position is set to absolute inside javascript*/
+.ts-player .ts-control .ts-wait {
+ background-repeat: no-repeat;
+ background-image: url('img/wait.gif');
+ text-align: right;
+ right:0;
+ height:28px;
+ line-height:28px;
+ top:0;
+ background-position: right center;
+ padding-right: 30px;
+ font-size: 80%;
+ color: #000;
+}
projects / telemeta.git / commitdiff
