Skip to content

Commit

Permalink
Merge pull request mediaelement#339 from kristerkari/master
Browse files Browse the repository at this point in the history 
Add missing CSS3 gradient syntaxes
  • Loading branch information
@johndyer
johndyer committed Dec 28, 2011
2 parents 7c7d150 + 3e62ba5 commit d8ff16d
Show file tree
Hide file tree
Showing 9 changed files with 101 additions and 55 deletions.
Binary file modified build/controls-ted.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified build/controls-wmp-bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified build/controls-wmp.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 50 additions & 27 deletions build/mediaelementplayer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background: url(bigplay.png) top left no-repeat;
background: url(bigplay.png) no-repeat;
}
.mejs-overlay:hover .mejs-overlay-button{
background-position: 0 -100px ;
Expand All @@ -86,15 +86,18 @@
background: #333;
background: url(background.png);
background: rgba(0, 0, 0, 0.9);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.9)), to(rgba(0,0,0,0.9)));
background: -moz-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.9)), to(rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: -moz-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: -o-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: -ms-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9));
}
.mejs-overlay-loading span {
display:block;
width: 80px;
height: 80px;
background: transparent url(loading.gif) center center no-repeat;
background: transparent url(loading.gif) 50% 50% no-repeat;
}

/* End: LAYERS */
Expand All @@ -110,9 +113,12 @@
left: 0;
background: url(background.png);
background: rgba(0, 0, 0, 0.7);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
height: 30px;
width: 100%;
}
Expand All @@ -135,7 +141,7 @@
.mejs-controls .mejs-button button {
cursor: pointer;
display: block;
font-size: 0px;
font-size: 0;
line-height: 0;
text-decoration: none;
margin: 7px 5px;
Expand All @@ -144,7 +150,7 @@
height: 16px;
width: 16px;
border: 0;
background: transparent url(controls.png) 0 0 no-repeat;
background: transparent url(controls.png) no-repeat;
}

/* :focus for accessibility */
Expand Down Expand Up @@ -212,26 +218,36 @@
margin: 5px;
background: #333;
background: rgba(50,50,50,0.8);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#1E1E1E,endColorstr=#3C3C3C);
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
background: #3caac8;
background: rgba(60,170,200,0.8);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8)));
background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8)));
background: -webkit-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: -o-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: -ms-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#2C7C91,endColorstr=#4EB7D4);
width: 0;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
width: 0;
background: #fff;
background: rgba(255,255,255,0.8);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#FFFFFF,endColorstr=#C8C8C8);
}

Expand Down Expand Up @@ -338,9 +354,9 @@
margin: 0;
}
.mejs-controls .mejs-volume-button:hover {
-webkit-border-radius: 0 0 4px 4px ;
-moz-border-radius: 0 0 4px 4px ;
border-radius: 0 0 4px 4px ;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
/*
.mejs-controls .mejs-volume-button:hover .mejs-volume-slider {
Expand Down Expand Up @@ -438,7 +454,7 @@
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input{
clear: both;
float: left;
margin: 3px 3px 0px 5px;
margin: 3px 3px 0 5px;
}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label{
width: 100px;
Expand Down Expand Up @@ -467,9 +483,12 @@
float: left;
background: #222;
background: rgba(0, 0, 0, 0.7);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232,endColorstr=#000000);
overflow: hidden;
border: 0;
Expand All @@ -491,8 +510,12 @@
/*background: #333;*/
background: #666;
background: rgba(102,102,102, 0.7);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(102,102,102,0.7)), to(rgba(50,50,50,0.6)));
background: -moz-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102,102,102,0.7)), to(rgba(50,50,50,0.6)));
background: -webkit-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
background: -moz-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
background: -o-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
background: -ms-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
background: linear-gradient(rgba(102,102,102,0.7), rgba(50,50,50,0.6));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232);
}
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title{
Expand Down
2 changes: 1 addition & 1 deletion build/mediaelementplayer.min.css
View file

Large diffs are not rendered by default.

Binary file modified src/css/controls-ted.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/css/controls-wmp-bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/css/controls-wmp.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 50 additions & 27 deletions src/css/mediaelementplayer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background: url(bigplay.png) top left no-repeat;
background: url(bigplay.png) no-repeat;
}
.mejs-overlay:hover .mejs-overlay-button{
background-position: 0 -100px ;
Expand All @@ -86,15 +86,18 @@
background: #333;
background: url(background.png);
background: rgba(0, 0, 0, 0.9);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.9)), to(rgba(0,0,0,0.9)));
background: -moz-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.9)), to(rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: -moz-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: -o-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: -ms-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9));
}
.mejs-overlay-loading span {
display:block;
width: 80px;
height: 80px;
background: transparent url(loading.gif) center center no-repeat;
background: transparent url(loading.gif) 50% 50% no-repeat;
}

/* End: LAYERS */
Expand All @@ -110,9 +113,12 @@
left: 0;
background: url(background.png);
background: rgba(0, 0, 0, 0.7);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
height: 30px;
width: 100%;
}
Expand All @@ -135,7 +141,7 @@
.mejs-controls .mejs-button button {
cursor: pointer;
display: block;
font-size: 0px;
font-size: 0;
line-height: 0;
text-decoration: none;
margin: 7px 5px;
Expand All @@ -144,7 +150,7 @@
height: 16px;
width: 16px;
border: 0;
background: transparent url(controls.png) 0 0 no-repeat;
background: transparent url(controls.png) no-repeat;
}

/* :focus for accessibility */
Expand Down Expand Up @@ -212,26 +218,36 @@
margin: 5px;
background: #333;
background: rgba(50,50,50,0.8);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#1E1E1E,endColorstr=#3C3C3C);
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
background: #3caac8;
background: rgba(60,170,200,0.8);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8)));
background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8)));
background: -webkit-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: -o-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: -ms-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#2C7C91,endColorstr=#4EB7D4);
width: 0;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
width: 0;
background: #fff;
background: rgba(255,255,255,0.8);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#FFFFFF,endColorstr=#C8C8C8);
}

Expand Down Expand Up @@ -338,9 +354,9 @@
margin: 0;
}
.mejs-controls .mejs-volume-button:hover {
-webkit-border-radius: 0 0 4px 4px ;
-moz-border-radius: 0 0 4px 4px ;
border-radius: 0 0 4px 4px ;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
/*
.mejs-controls .mejs-volume-button:hover .mejs-volume-slider {
Expand Down Expand Up @@ -438,7 +454,7 @@
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input{
clear: both;
float: left;
margin: 3px 3px 0px 5px;
margin: 3px 3px 0 5px;
}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label{
width: 100px;
Expand Down Expand Up @@ -467,9 +483,12 @@
float: left;
background: #222;
background: rgba(0, 0, 0, 0.7);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232,endColorstr=#000000);
overflow: hidden;
border: 0;
Expand All @@ -491,8 +510,12 @@
/*background: #333;*/
background: #666;
background: rgba(102,102,102, 0.7);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(102,102,102,0.7)), to(rgba(50,50,50,0.6)));
background: -moz-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102,102,102,0.7)), to(rgba(50,50,50,0.6)));
background: -webkit-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
background: -moz-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
background: -o-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
background: -ms-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
background: linear-gradient(rgba(102,102,102,0.7), rgba(50,50,50,0.6));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232);
}
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title{
Expand Down

0 comments on commit d8ff16d

Please sign in to comment.