github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/js/jPlayer/jplayer.flat.css (about) 1 /*controls*/ 2 .jp-controls { 3 display: table; 4 table-layout: fixed; 5 border-spacing: 0; 6 width: 100%; 7 } 8 .jp-controls a{ 9 cursor: pointer; 10 display: inline-block; 11 padding: 10px 5px; 12 } 13 14 .jp-controls a i{ 15 line-height: inherit; 16 } 17 .jp-controls > div{ 18 display: table-cell; 19 vertical-align: middle; 20 text-align: center; 21 width: 40px; 22 height: 60px; 23 } 24 div.jp-progress{ 25 width: auto; 26 padding: 0 15px; 27 vertical-align: top; 28 position: relative; 29 } 30 .jp-seek-bar{ 31 position: relative; 32 } 33 .jp-title{ 34 position: absolute; 35 left: 25px; 36 top: 0; 37 right: 25px; 38 display: block !important; 39 line-height: 60px; 40 } 41 .jp-title ul{ 42 list-style: none; 43 margin: 0; 44 padding: 0; 45 } 46 47 .jp-title li{ 48 overflow: hidden; 49 text-overflow: ellipsis; 50 white-space: nowrap; 51 } 52 .jp-artist{ 53 opacity: 0.6; 54 } 55 56 .jp-play-bar{ 57 height: 60px; 58 } 59 .jp-volume{ 60 width: 60px !important; 61 padding-right:10px !important; 62 } 63 .jp-volume-bar-value{ 64 height: 6px; 65 } 66 a.hid{ 67 display: none; 68 } 69 70 /*video*/ 71 .jp-video{ 72 font-size: 0; 73 line-height: 0; 74 min-height: 160px; 75 } 76 .jp-video-play{ 77 display: inline-block; 78 position: absolute; 79 left: 50%; 80 top: 50%; 81 cursor: pointer; 82 margin-left: -30px; 83 margin-top: -65px; 84 } 85 .jp-video-full { 86 /* Rules for IE6 (full-screen) */ 87 width:480px; 88 height:270px; 89 /* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */ 90 position:static !important; position:relative; 91 } 92 93 /* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. */ 94 .jp-video-full div div { 95 z-index:1000; 96 } 97 98 .jp-video-full .jp-jplayer { 99 top: 0; 100 left: 0; 101 position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */ 102 overflow: hidden; 103 } 104 105 .jp-video-full .jp-gui { 106 position: fixed !important; position: static; /* Rules for IE6 (full-screen) */ 107 top: 0; 108 left: 0; 109 width:100%; 110 height:100%; 111 z-index:1001; /* 1 layer above the others. */ 112 } 113 114 .jp-video-full .jp-interface { 115 position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */ 116 bottom: 0; 117 left: 0; 118 } 119 120 121 /*playlist*/ 122 123 .jp-playlist ul{ 124 max-height: 320px; 125 overflow-x: hidden; 126 overflow-y: auto; 127 padding: 0; 128 display: none !important; 129 } 130 131 .jp-playlist.open ul{ 132 display: block !important; 133 bottom: 60px; 134 left: 180px; 135 } 136 137 .jp-playlist li{ 138 list-style: none; 139 position: relative; 140 } 141 142 .jp-playlist-item{ 143 display: block; 144 overflow: hidden; 145 text-overflow: ellipsis; 146 white-space: nowrap; 147 border-top: 1px solid rgba(255, 255, 255, .1); 148 padding: 12px 40px 12px 8px; 149 } 150 .jp-playlist-item:focus{ 151 outline: 0; 152 } 153 154 .jp-playlist-item:before{ 155 display: inline-block; 156 text-align: center; 157 width: 30px; 158 font-family: FontAwesome; 159 content:"\f0da"; 160 opacity: 0.6; 161 } 162 163 a.jp-playlist-current:before{ 164 content:"\f144"; 165 opacity: 1; 166 } 167 168 .jp-playlist li:first-child .jp-playlist-item{ 169 border-width: 0; 170 } 171 172 .jp-playlist-item-remove{ 173 font-size: 15px; 174 display: block; 175 position: absolute; 176 right: 0; 177 top: 0; 178 padding: 11px 18px; 179 opacity: 0.6; 180 } 181 182 183 @media (max-width: 767px) { 184 .footer .jp-gui{ 185 margin: 0 -10px; 186 } 187 div.jp-progress{ 188 padding: 0 10px; 189 } 190 .jp-playlist.open ul{ 191 display: block !important; 192 bottom: 60px; 193 left: 0px; 194 right: 0px; 195 } 196 }