forked from 0x2620/oxjs
updates for players, timelines and markers
This commit is contained in:
rlx
parent
9a7a0acd89
commit
18f117138d
9 changed files with 213 additions and 184 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue