-
Notifications
You must be signed in to change notification settings - Fork 0
/
player.css
executable file
·108 lines (108 loc) · 2.24 KB
/
player.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/* PLAYER
==============================================================================*/
.player {
position: relative;
width: 480px;
height: 270px;
overflow: hidden;
}
.player-controls {
/*display: none;*/
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
overflow: hidden;
background: url(player-sprite.png) left bottom repeat-x;
}
.player:hover .player-controls {
display: block;
}
.player-play,
.player-pause,
.player-bar,
.player-playing,
.player-progress,
.player-seeker,
.player-mute,
.player-volumebar,
.player-volumelevel,
.player-volume
{
position: absolute;
top:0;
height: 100%;
background: url(player-sprite.png) -33px 0 no-repeat;
cursor: pointer;
}
.player-play:hover, .player-mute:hover {
background-position-x: 0;
}
.player-play {
width: 33px;
left: 0;
background-position: -33px 0;
}
.player-play.playing {
background-position: -33px -30px;
}
.player-bar {
background-position: 0 -180px;
background-repeat: repeat-x;
overflow:hidden;
}
.player-progress {
background-position: 5px -150px;
background-repeat: repeat-x;
}
.player-playing {
background-position: 0 -120px;
background-repeat: repeat-x;
}
.player-seeker, .player-volume {
width: 100%;
background: transparent;
}
.player-mute {
width: 33px;
background-position: -33px -60px;
}
.player-mute.on {
background-position: -33px -90px;
}
.player-volumebar {
width: 50px;
background-position: 0 -180px;
background-repeat: repeat-x;
}
.player-volumelevel {
background-position: 0 -120px;
background-repeat: repeat-x;
}
/* PLAYER CONTEXTMENU
------------------------------------------------------------------------------*/
#contextmenu {
min-width: 160px;
font-size: smaller;
border: 1px solid #ddd;
background: #f7f7f7;
cursor: pointer;
}
#contextmenu a, #contextmenu a:visited {
display: block;
margin: 0 5px;
padding: 8px 10px;
color: #555;
border-top: 1px solid #fff;
border-bottom: 1px solid #e3e3e3;
text-decoration: none;
}
#contextmenu a:first-child {
border-top: 0;
}
#contextmenu a:last-child {
border-bottom: 0;
}
#contextmenu a:hover, #contextmenu a:focus {
color: #333;
}