0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

updates for players, timelines and markers

Browse source
This commit is contained in:
rlx 2011-09-02 03:28:43 +00:00
parent 9a7a0acd89
commit 18f117138d
9 changed files with 213 additions and 184 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

161
source/Ox.UI/css/Ox.UI.css
View file

@ -576,7 +576,7 @@ OxButton
border: 1px solid rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
//-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
/*
--------------------------------------------------------------------------------
@ -1798,51 +1798,52 @@ Video
}
.OxTimelineLarge {
.OxLargeVideoTimeline {
position: absolute;
height: 72px;
margin: 0 4px 0 4px;
overflow: hidden;
}
.OxTimelineLarge > div {
.OxLargeVideoTimeline > div {
position: absolute;
height: 72px;
}
.OxTimelineLarge > div > img {
.OxLargeVideoTimeline > div > img {
position: absolute;
top: 4px;
}
.OxTimelineLarge .OxCut {
position: absolute;
top: 66px;
width: 4px;
height: 4px;
margin-left: -2px;
z-index: 10;
}
.OxTimelineLarge .OxMarkerPointIn {
.OxLargeVideoTimeline .OxCut {
position: absolute;
top: 64px;
width: 6px;
height: 6px;
margin-left: -3px;
z-index: 10;
}
.OxLargeVideoTimeline .OxMarkerPointIn {
position: absolute;
top: 63px;
width: 7px;
height: 7px;
margin-left: -6px;
z-index: 10;
}
.OxLargeVideoTimeline .OxMarkerPointOut {
position: absolute;
top: 63px;
width: 7px;
height: 7px;
z-index: 10;
}
.OxLargeVideoTimeline .OxMarkerPosition {
position: absolute;
top: 2px;
width: 11px;
height: 11px;
margin-left: -5px;
z-index: 10;
}
.OxTimelineLarge .OxMarkerPointOut {
position: absolute;
top: 64px;
width: 6px;
height: 6px;
z-index: 10;
}
.OxTimelineLarge .OxMarkerPosition {
position: absolute;
top: 2px;
width: 9px;
height: 9px;
z-index: 10;
}
.OxTimelineLarge .OxSubtitle {
.OxLargeVideoTimeline .OxSubtitle {
position: absolute;
bottom: 9px;
border: 1px solid rgba(255, 255, 255, 0.5);
@ -1860,7 +1861,7 @@ Video
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.OxTimelineLarge .OxSubtitle.OxHighlight {
.OxLargeVideoTimeline .OxSubtitle.OxHighlight {
border-color: rgba(255, 255, 0, 1);
}
.OxTimelineSmall {
@ -1880,17 +1881,60 @@ Video
.OxTimelineSmall > div > .OxTimelineSmallImage {
margin-top: 1px;
}
.OxTimelineSmall .OxMarkerPointIn {
.OxSmallVideoTimeline .OxMarkerPlay {
position: absolute;
width: 6px;
height: 6px;
margin-left: -1px;
width: 14px;
height: 14px;
border-width: 1px;
border-style: solid;
border-radius: 8px;
}
.OxTimelineSmall .OxMarkerPointOut {
.OxSmallVideoTimeline .OxMarkerPlay > div {
width: 10px;
height: 10px;
border-width: 2px;
border-style: solid;
border-radius: 7px;
}
.OxSmallVideoTimeline .OxMarkerPlay > div > div {
width: 8px;
height: 8px;
border-width: 1px;
border-style: solid;
border-radius: 5px;
}
.OxSmallVideoTimeline .OxMarkerPointIn,
.OxBlockVideoTimeline .OxMarkerPointIn {
position: absolute;
width: 6px;
height: 6px;
width: 7px;
height: 7px;
margin-left: -2px;
z-index: 10;
}
.OxSmallVideoTimeline .OxMarkerPointIn {
top: 15px;
}
.OxSmallVideoTimeline .OxMarkerPointOut,
.OxBlockVideoTimeline .OxMarkerPointOut {
position: absolute;
width: 7px;
height: 7px;
margin-left: 4px;
z-index: 10;
}
.OxSmallVideoTimeline .OxMarkerPointOut {
top: 15px;
}
.OxSmallVideoTimeline .OxMarkerPosition,
.OxBlockVideoTimeline .OxMarkerPosition {
position: absolute;
width: 11px;
height: 11px;
z-index: 10;
}
.OxSmallVideoTimeline .OxMarkerPosition {
top: 2px;
}
@ -1905,10 +1949,6 @@ Video
.OxVideoPlayer .OxControls {
position: absolute;
}
.OxVideoPlayer .OxControls.OxOnScreen {
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
}
.OxVideoPlayer .OxControls > * {
float: left;
}
@ -1918,8 +1958,6 @@ Video
right: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
display: none;
}
.OxVideoPlayer .OxFind > * {
@ -1930,9 +1968,26 @@ Video
padding-top: 2px;
font-size: 9px;
text-align: center;
color: rgb(255, 255, 255);
}
.OxVideoPlayer .OxInput {
background: transparent;
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
}
.OxVideoPlayer div.OxInput.OxFocus {
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
}
.OxVideoPlayer input.OxInput {
height: 16px;
padding: 0 3px 0 3px;
border: 0;
border-radius: 8px;
}
.OxVideoPlayer .OxLoadingIcon {
position: absolute;
left: 0;
@ -1989,7 +2044,6 @@ Video
padding: 2px;
font-size: 9px;
text-align: center;
color: rgb(255, 255, 255);
}
.OxVideoPlayer .OxPositionInput {
@ -2010,16 +2064,11 @@ Video
.OxVideoPlayer .OxResolution > div {
width: 52px;
height: 16px;
background: rgba(32, 32, 32, 0.5);
}
.OxVideoPlayer .OxResolution > div:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.OxVideoPlayer .OxResolution > div.OxSelected {
background-image: -moz-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5));
background-image: -webkit-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5));
}
.OxVideoPlayer .OxResolution > div > * {
float: left;
}
@ -2029,7 +2078,6 @@ Video
padding-top: 2px;
font-size: 9px;
text-align: right;
color: rgb(255, 255, 255);
cursor: default;
}
.OxVideoPlayer .OxResolution > div > img {
@ -2045,7 +2093,6 @@ Video
padding: 2px;
font-size: 9px;
text-align: center;
color: rgb(255, 255, 255);
cursor: default;
}
@ -2061,7 +2108,6 @@ Video
.OxVideoPlayer .OxTitle {
padding-top: 1px;
text-align: center;
color: rgb(255, 255, 255);
overflow: hidden;
text-overflow: ellipsis;
}
@ -2078,8 +2124,6 @@ Video
height: 16px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
display: none;
}
.OxVideoPlayer .OxVolume > * {
@ -2088,25 +2132,16 @@ Video
.OxVideoPlayer .OxVolume .OxRange .OxTrack {
padding: 1px;
border: 0;
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
}
.OxVideoPlayer .OxVolume .OxRange .OxThumb {
padding: 1px 7px 1px 7px;
border: 0;
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
}
.OxVideoPlayer .OxVolume .OxRange .OxThumb:active {
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
}
.OxVideoPlayer .OxVolume .OxVolumeValue {
width: 24px;
padding-top: 2px;
font-size: 9px;
text-align: center;
color: rgb(255, 255, 255);
}
.OxVideoPreview {

2
source/Ox.UI/js/Core/Ox.Theme.js
View file

@ -38,7 +38,7 @@ Ox.Theme = function(theme) {
$this.attr({
src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme)
});
Ox.print(Ox.UI.getImageName(src), Ox.UI.getImageURL(Ox.UI.getImageName(src), theme))
//Ox.print(Ox.UI.getImageName(src), Ox.UI.getImageURL(Ox.UI.getImageName(src), theme))
});
}
return theme;

23
source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
View file

@ -15,6 +15,7 @@ Ox.BlockVideoTimeline = function(options, self) {
width: 0
})
.options(options || {})
.addClass('OxBlockVideoTimeline')
.css({
position: 'absolute',
//background: 'rgba(192, 192, 192, 0.1)'
@ -62,14 +63,9 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$positionMarker = $('<img>')
.attr({
src: Ox.UI.getImageURL('markerPlay')
})
.css({
position: 'absolute',
width: '9px',
height: '9px',
zIndex: 10
src: Ox.UI.getImageURL('markerPosition')
})
.addClass('OxMarkerPosition')
.appendTo(that.$element);
setPositionMarker();
@ -77,17 +73,10 @@ Ox.BlockVideoTimeline = function(options, self) {
['in', 'out'].forEach(function(point) {
var titlecase = Ox.toTitleCase(point);
self.$pointMarker[point] = $('<img>')
.addClass('OxPointMarker' + titlecase)
.addClass('OxMarkerPoint' + titlecase)
.attr({
src: Ox.UI.getImageURL('marker' + titlecase)
})
.css({
position: 'absolute',
width: '6px',
height: '6px',
marginLeft: (point == 'in' ? -1 : 4) + 'px',
zIndex: 10
})
.appendTo(that.$element);
setPointMarker(point);
});
@ -205,13 +194,13 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$pointMarker[point].css({
left: (position % self.options.width) + 'px',
top: (parseInt(position / self.options.width) *
(self.height + self.margin) + 16) + 'px'
(self.height + self.margin) + 15) + 'px'
});
}
function setPositionMarker() {
self.$positionMarker.css({
left: (self.options.position % self.options.width) + 'px',
left: (self.options.position % self.options.width) - 1 + 'px',
top: (parseInt(self.options.position / self.options.width) *
(self.height + self.margin) + 2) + 'px'
});

6
source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js
View file

@ -28,7 +28,7 @@ Ox.LargeVideoTimeline = function(options, self) {
width: 0
})
.options(options || {})
.addClass('OxTimelineLarge')
.addClass('OxLargeVideoTimeline')
.mouseleave(mouseleave)
.mousemove(mousemove)
.bindEvent({
@ -75,7 +75,7 @@ Ox.LargeVideoTimeline = function(options, self) {
self.$markerPosition = $('<img>')
.addClass('OxMarkerPosition')
.attr({
src: Ox.UI.getImageURL('markerPlay')
src: Ox.UI.getImageURL('markerPosition')
})
.appendTo(that.$element);
setMarker();
@ -134,7 +134,7 @@ Ox.LargeVideoTimeline = function(options, self) {
function setMarker() {
self.$markerPosition.css({
left: (self.center - 4) + 'px',
left: self.center + 'px',
});
}

55
source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
View file

@ -71,43 +71,14 @@ Ox.SmallVideoTimeline = function(options, self) {
if (self.options.type == 'player') {
self.$positionMarker = $('<div>')
.css({
position: 'absolute',
width: '14px',
height: '14px',
border: '1px solid rgba(0, 0, 0, 0.5)',
borderRadius: '8px'
})
.append(
self.$positionMarkerRing = $('<div>')
.css({
width: '10px',
height: '10px',
border: '2px solid rgba(255, 255, 255, ' + (self.options.paused ? 0.5 : 1) + ')',
borderRadius: '7px',
})
.append(
$('<div>')
.css({
width: '8px',
height: '8px',
border: '1px solid rgba(0, 0, 0, 0.5)',
borderRadius: '5px',
})
)
)
.addClass('OxMarkerPlay' + (self.options.paused ? ' OxPaused' : ''))
.append($('<div>').append($('<div>')))
.appendTo(that.$element);
} else {
self.$positionMarker = $('<img>')
.addClass('OxMarkerPosition')
.attr({
src: Ox.UI.getImageURL('markerPlay')
})
.css({
position: 'absolute',
top: '2px',
width: '9px',
height: '9px',
zIndex: 10
src: Ox.UI.getImageURL('markerPosition')
})
.appendTo(that.$element);
}
@ -118,18 +89,10 @@ Ox.SmallVideoTimeline = function(options, self) {
['in', 'out'].forEach(function(point) {
var titlecase = Ox.toTitleCase(point);
self.$pointMarker[point] = $('<img>')
.addClass('OxPointMarker' + titlecase)
.addClass('OxMarkerPoint' + titlecase)
.attr({
src: Ox.UI.getImageURL('marker' + titlecase)
})
.css({
position: 'absolute',
top: '16px',
width: '6px',
height: '6px',
marginLeft: (point == 'in' ? -1 : 4) + 'px',
zIndex: 10
})
.appendTo(that.$element);
setPointMarker(point);
});
@ -213,7 +176,7 @@ Ox.SmallVideoTimeline = function(options, self) {
self.$positionMarker.css({
left: self.interfaceLeft + Math.round(
self.options.position * self.imageWidth / self.options.duration
) - (self.options.type == 'editor' ? 4 : 0) + self.options._offset + 'px'
) - (self.options.type == 'editor' ? 5 : 0) + self.options._offset + 'px'
});
}
@ -256,9 +219,9 @@ Ox.SmallVideoTimeline = function(options, self) {
});
setPointMarker('out');
} else if (key == 'paused') {
self.$positionMarkerRing.css({
borderColor: 'rgba(255, 255, 255, ' + (self.options.paused ? 0.5 : 1) + ')'
})
self.$positionMarker[
self.options.paused ? 'addClass' : 'removeClass'
]('OxPaused');
} else if (key == 'position') {
setPositionMarker();
} else if (key == 'results') {

19
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -462,7 +462,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Find',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: toggleFind
})
@ -479,7 +478,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Enter Fullscreen', 'Exit Fullscreen'],
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
toggleFullscreen('button');
@ -495,7 +493,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Go to ' + Ox.toTitleCase(self.options.type) + ' Point',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: goToPoint
})
@ -512,7 +509,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Mute', 'Unmute'],
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
toggleMuted('button');
@ -528,7 +524,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Next',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
goToNextClip(1);
@ -548,7 +543,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Play', 'Pause'],
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
togglePaused('button');
@ -564,7 +558,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Play In to Out',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: playInToOut
})
@ -637,7 +630,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Previous',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
goToNextClip(-1);
@ -701,7 +693,6 @@ Ox.VideoPlayer = function(options, self) {
.html(resolution + 'p')
.appendTo($item);
$('<img>')
.addClass('OxVideo')
.attr({
src: resolution == self.options.resolution ?
Ox.UI.getImageURL('symbolCheck', 'modern') :
@ -721,7 +712,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Scale to Fill', 'Scale to Fit'],
type: 'image'
})
.addClass('OxVideo')
.bindEvent('click', function() {
toggleScale('button');
})
@ -735,7 +725,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Set ' + Ox.toTitleCase(self.options.type) + ' Point',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: setPoint
})
@ -752,7 +741,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Larger', 'Smaller'],
type: 'image'
})
.addClass('OxVideo')
.bindEvent('click', toggleSize)
.appendTo(self['$controls' + titleCase]);
@ -801,7 +789,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Volume',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: toggleVolume
})
@ -844,7 +831,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Previous',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
goToNextResult(-1);
@ -859,7 +845,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Next',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
goToNextResult(1);
@ -895,7 +880,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Clear',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
self.options.find = '';
@ -918,7 +902,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Hide',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: toggleFind
})
@ -947,7 +930,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Hide',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: toggleVolume
})
@ -962,7 +944,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Mute', 'Unmute'],
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
toggleMuted();

66
source/Ox.UI/themes/classic/css/classic.css
View file

@ -197,6 +197,11 @@ Forms
background: rgb(192, 192, 192);
color: rgb(128, 128, 128);
}
.OxThemeClassic .OxButton.OxSymbol.OxDisabled {
background: rgba(0, 0, 0, 0);
opacity: 0.5;
}
.OxThemeClassic .OxButton.OxSelected,
.OxThemeClassic .OxSelect.OxSelected {
@ -559,29 +564,54 @@ Video
================================================================================
*/
.OxThemeClassic .OxVideoPlayer .OxInput {
background: rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
.OxThemeClassic .OxSmallVideoTimeline .OxMarkerPlay {
border-color: rgba(255, 255, 255, 0.5);
}
.OxThemeClassic .OxVideoPlayer div.OxInput.OxFocus {
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
.OxThemeClassic .OxSmallVideoTimeline .OxMarkerPlay > div {
border-color: rgba(0, 0, 0, 1);
}
.OxThemeClassic .OxVideoPlayer input.OxInput {
height: 16px;
padding: 0 3px 0 3px;
border: 0;
border-radius: 8px;
color: rgb(255, 255, 255);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
.OxThemeClassic .OxSmallVideoTimeline .OxMarkerPlay.OxPaused > div {
border-color: rgba(0, 0, 0, 0.5);
}
.OxThemeClassic .OxVideoPlayer .OxRange .OxThumb:active {
background: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background: -webkit-linear-gradient(top, rgba(255, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
.OxThemeClassic .OxSmallVideoTimeline .OxMarkerPlay > div > div {
border-color: rgba(255, 255, 255, 0.5);
}
.OxThemeClassic .OxVideoPlayer .OxControls.OxOnScreen {
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
}
.OxThemeClassic .OxVideoPlayer .OxFind {
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
}
.OxThemeClassic .OxVideoPlayer input.OxInput {
background-image: -moz-linear-gradient(top, rgba(192, 192, 192, 0.5), rgba(255, 255, 255, 0.5));
background-image: -webkit-linear-gradient(top, rgba(176, 176, 176, 1), rgba(224, 224, 224, 1));
}
.OxThemeClassic .OxVideoPlayer .OxResolution > div {
background: rgba(224, 224, 224, 0.5);
}
.OxThemeClassic .OxVideoPlayer .OxResolution > div.OxSelected {
background-image: -moz-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(208, 208, 208, 0.5));
background-image: -webkit-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(208, 208, 208, 0.5));
}
.OxThemeClassic .OxVideoPlayer .OxVolume {
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
}
.OxThemeClassic .OxVideoPlayer .OxVolume .OxRange .OxTrack {
background-image: -moz-linear-gradient(top, rgba(192, 192, 192, 0.5), rgba(255, 255, 255, 0.5));
background-image: -webkit-linear-gradient(top, rgba(192, 192, 192, 0.5), rgba(255, 255, 255, 0.5));
}
.OxThemeClassic .OxVideoPlayer .OxVolume .OxRange .OxThumb {
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
}
.OxThemeClassic .OxVideoPlayer .OxVolume .OxRange .OxThumb:active {
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
}
/*
================================================================================

0
source/Ox.UI/themes/classic/svg/markerPlay.svg → source/Ox.UI/themes/classic/svg/markerPosition.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 165 B

After

Width:  |  Height:  |  Size: 165 B

65
source/Ox.UI/themes/modern/css/modern.css
View file

@ -198,6 +198,11 @@ Forms
background: rgb(80, 80, 80);
color: rgb(128, 128, 128);
}
.OxThemeModern .OxButton.OxSymbol.OxDisabled {
background: rgba(0, 0, 0, 0);
opacity: 0.5;
}
.OxThemeModern .OxButton.OxSelected,
.OxThemeModern .OxSelect.OxSelected,
.OxThemeModern .OxCollapsePanel > .OxBar > .OxExtras > .OxSelect.OxSelected {
@ -552,37 +557,63 @@ Video
}
.OxThemeModern .OxSmallVideoTimeline .OxMarkerPlay {
border-color: rgba(0, 0, 0, 0.5);
}
.OxThemeModern .OxSmallVideoTimeline .OxMarkerPlay > div {
border-color: rgba(255, 255, 255, 1);
}
.OxThemeModern .OxSmallVideoTimeline .OxMarkerPlay.OxPaused > div {
border-color: rgba(255, 255, 255, 0.5);
}
.OxThemeModern .OxSmallVideoTimeline .OxMarkerPlay > div > div {
border-color: rgba(0, 0, 0, 0.5);
}
.OxThemeModern .OxVideoPlayer .OxButton.OxDisabled {
background: transparent;
opacity: 0.25;
}
.OxThemeModern .OxVideoPlayer .OxInput {
background: transparent;
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
.OxThemeModern .OxVideoPlayer .OxControls.OxOnScreen {
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
}
.OxThemeModern .OxVideoPlayer div.OxInput.OxFocus {
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
.OxThemeModern .OxVideoPlayer .OxFind {
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
}
.OxThemeModern .OxVideoPlayer input.OxInput {
height: 16px;
padding: 0 3px 0 3px;
border: 0;
border-radius: 8px;
color: rgb(255, 255, 255);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1), rgba(32, 32, 32, 1));
}
.OxThemeModern .OxVideoPlayer .OxResolution > div {
background: rgba(32, 32, 32, 0.5);
}
.OxThemeModern .OxVideoPlayer .OxResolution > div.OxSelected {
background-image: -moz-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5));
background-image: -webkit-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5));
}
.OxThemeModern .OxVideoPlayer .OxVolume {
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
}
.OxThemeModern .OxVideoPlayer .OxVolume .OxRange .OxTrack {
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
}
.OxThemeModern .OxVideoPlayer input.OxInput.OxPlaceholder {
//opacity: 0.25;
.OxThemeModern .OxVideoPlayer .OxVolume .OxRange .OxThumb {
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
}
.OxThemeModern .OxVideoPlayer .OxRange .OxThumb:active {
background: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background: -webkit-linear-gradient(top, rgba(255, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
.OxThemeModern .OxVideoPlayer .OxVolume .OxRange .OxThumb:active {
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
}
// fixme: used?
.OxThemeModern .OxVideoPlayer .OxSelect {
border-color: transparent;
//margin-left: 0px;