update css (collapse panel extras, video editor bars, video find element)

source/Ox.UI/css/Ox.UI.css

@@ -1630,9 +1630,15 @@ Panels
     height: 16px;
     padding: 1px 1px 0 0;
     border-width: 0;
-    background: rgba(0, 0, 0, 0);
     border-radius: 0;
+    background: rgba(0, 0, 0, 0);
 }
+.OxCollapsePanel > .OxBar > .OxExtras > .OxSelect.OxFocus {
+    -moz-box-shadow: 0 0 0;
+    -o-box-shadow: 0 0 0;
+    -webkit-box-shadow: 0 0 0;
+}
+
 
 .OxCollapsePanel > .OxContent {
     position: relative;
@@ -2046,11 +2052,24 @@ Video
 }
 .OxVideoPlayer input.OxInput {
     height: 16px;
-    padding: 0 3px 0 3px;
+    //padding: 0 4px 0 4px;
     border: 0;
     border-radius: 8px;
 }
+.OxVideoPlayer .OxPositionInput > input.OxInput {
+    padding: 0 3px 0 3px;
+}
 
+.OxVideoPlayer .OxSelect {
+    width: 16px;
+    height: 16px;
+    border-width: 0;
+    border-radius: 0;
+    background: rgba(0, 0, 0, 0);
+}
+.OxVideoPlayer .OxSelect > .OxButton {
+    margin: 0;
+}
 
 
 .OxVideoPlayer .OxCopyrightIcon {

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -31,6 +31,7 @@ Ox.VideoEditor = function(options, self) {
                 out: 0,
                 position: 0,
                 posterFrame: 0,
+                posterFrameControls: false,
                 showAnnotations: false,
                 showLargeTimeline: true,
                 subtitles: [],
@@ -312,7 +313,7 @@ Ox.VideoEditor = function(options, self) {
         );
     });
 
-    self.$keyboardShortcuts = $('<div>');
+    self.$keyboardShortcuts = $('<div>').css({margin: '16px'});
     [
         {key: Ox.UI.symbols.space, action: 'Play/Pause'},
         {key: 'P', action: 'Play In to Out'},
@@ -373,20 +374,18 @@ Ox.VideoEditor = function(options, self) {
                 self.resolutions,
                 [
                     {},
-                    {id: 'largeTimeline', title: 'Hide Large Timeline'},
+                    {id: 'largeTimeline', title: 'Hide Large Timeline', disabled: true},
-                    {id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline'},
+                    {id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline', disabled: true},
                     {},
-                    {id: 'linkSelection', title: 'Link to Selection...'},
+                    {id: 'downloadVideo', title: 'Download Video...', disabled: true},
-                    {id: 'embed', title: 'Embed Selection...'},
+                    {id: 'downloadSelection', title: 'Download Selection...', disabled: true},
-                    {id: 'downloadSelection', title: 'Download Selection...'},
+                    {id: 'embedSelection', title: 'Embed Selection...', disabled: true},
                     {},
                     {id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
                 ]
             ),
             selectable: false,
-            title: $('<img>').attr({
+            title: 'set',
-                src: Ox.UI.getImageURL('symbolSet')
-            }),
             tooltip: 'Actions and Settings',
             type: 'image'
         })
@@ -442,8 +441,7 @@ Ox.VideoEditor = function(options, self) {
         });
         //.appendTo(self.$videobar);
     
-
+    if (self.options.posterFrameControls) {
-    //$('<div>').css({float: 'left', width: '8px', height: '1px'}).appendTo(self.$videobar.$element);
 
         self.$goToPosterButton = Ox.Button({
                 style: 'symbol',
@@ -493,6 +491,8 @@ Ox.VideoEditor = function(options, self) {
             })
             .appendTo(self.$videobar);
 
+    }
+
     self.$clearButton = Ox.Button({
             disabled: self.options.find === '',
             style: 'symbol',
@@ -601,9 +601,7 @@ Ox.VideoEditor = function(options, self) {
             
             ],
             max: 2,
-            title: $('<img>').attr({
+            title: 'set',
-                src: Ox.UI.getImageURL('symbolSet')
-            }),
             tooltip: 'Actions and Settings',
             type: 'image'
         })

source/Ox.UI/js/Video/Ox.VideoPlayer.js

@@ -1150,7 +1150,7 @@ Ox.VideoPlayer = function(options, self) {
             };
         } else if (element == 'find') {
             css = {
-                width: Math.min(216, self.width) + 'px'
+                width: Math.min(216, self.width) + 'px' // 128 + 4 * 16 + 24
             };
         } else if (element == 'loadingIcon') {
             css = {
@@ -1825,12 +1825,12 @@ Ox.VideoPlayer = function(options, self) {
         });
         setSize(self.$spaceBottom, getCSS('spaceBottom'), animate);
         setSize(self.$find, getCSS('find'), animate, function() {
-            var width = Math.min(128, self.width - 88);
+            var width = Math.min(128, self.width - 88); // 4 * 16 + 24
             self.$findInput.options({
                 width: width
             });
             self.$findInput.children('input').css({
-                width: (width - 6) + 'px',
+                width: (width - 12) + 'px',
             });            
         });
         setSize(self.$volume, getCSS('volume'), animate, function() {