wp-includes/js/mediaelement/wp-mediaelement.css

   1 .mejs-container {
   2         clear: both;
   3 }
   4
   5 .mejs-container * {
   6         font-family: Helvetica, Arial;
   7 }
   8
   9 .mejs-container,
  10 .mejs-embed,
  11 .mejs-embed body,
  12 .mejs-container .mejs-controls {
  13         background: #222;
  14 }
  15
  16 .mejs-controls a.mejs-horizontal-volume-slider {
  17         display: table;
  18 }
  19
  20 .mejs-controls .mejs-time-rail .mejs-time-loaded,
  21 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  22         background: #fff;
  23 }
  24
  25 .mejs-controls .mejs-time-rail .mejs-time-current {
  26         background: #0074a2;
  27 }
  28
  29 .mejs-controls .mejs-time-rail .mejs-time-total,
  30 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
  31         background: rgba(255, 255, 255, .33);
  32 }
  33
  34 .mejs-controls .mejs-time-rail span,
  35 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
  36 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  37         border-radius: 0;
  38 }
  39
  40 .mejs-controls .mejs-offscreen {
  41         clip: rect(1px, 1px, 1px, 1px);
  42         position: absolute;
  43 }
  44
  45 .mejs-controls a:focus > .mejs-offscreen {
  46         background-color: #f1f1f1;
  47         border-radius: 3px;
  48         box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  49         clip: auto;
  50         color: #21759b;
  51         display: block;
  52         font-size: 14px;
  53         font-weight: bold;
  54         height: auto;
  55         line-height: normal;
  56         padding: 15px 23px 14px;
  57         position: absolute;
  58         left: 0;
  59         top: 15px;
  60         text-decoration: none;
  61         text-transform: none;
  62         width: auto;
  63 }
  64
  65 .mejs-overlay-loading {
  66         background: transparent;
  67 }
  68
  69 /* Override theme styles that may conflict with controls. */
  70 .mejs-controls button:hover {
  71         border: none;
  72         -webkit-box-shadow: none;
  73         box-shadow: none;
  74 }
  75
  76 .me-cannotplay {
  77         width: auto !important;
  78 }
  79
  80 .media-embed-details .wp-audio-shortcode {
  81         display: inline-block;
  82         max-width: 400px;
  83 }
  84
  85 .audio-details .embed-media-settings {
  86         overflow: visible;
  87 }
  88
  89 .media-embed-details .embed-media-settings .setting span {
  90         max-width: 400px;
  91         width: auto;
  92 }
  93
  94 .media-embed-details .embed-media-settings .checkbox-setting span {
  95         display: inline-block;
  96 }
  97
  98 .media-embed-details .embed-media-settings {
  99         padding-top: 0;
 100         top: 28px;
 101 }
 102
 103 .media-embed-details .instructions {
 104         padding: 16px 0;
 105         max-width: 600px;
 106 }
 107
 108 .media-embed-details .setting p,
 109 .media-embed-details .setting a {
 110         color: #a00;
 111         font-size: 10px;
 112         text-transform: uppercase;
 113 }
 114
 115 .media-embed-details .setting a:hover {
 116         color: #f00;
 117 }
 118
 119 .media-embed-details .embed-media-settings .checkbox-setting {
 120         float: none;
 121         margin: 0 0 10px;
 122 }
 123
 124 .wp-video {
 125         max-width: 100%;
 126         height: auto;
 127 }
 128
 129 .wp_attachment_holder .wp-video {
 130         margin-top: 18px;
 131 }
 132
 133 video.wp-video-shortcode,
 134 .wp-video-shortcode video {
 135         max-width: 100%;
 136         display: inline-block;
 137 }
 138
 139 .video-details .wp-video-holder {
 140         width: 100%;
 141         max-width: 640px;
 142 }
 143
 144 .wp-playlist {
 145         border: 1px solid #ccc;
 146         padding: 10px;
 147         margin: 12px 0 18px;
 148         font-size: 14px;
 149         line-height: 1.5;
 150 }
 151
 152 .wp-admin .wp-playlist {
 153         margin: 0 0 18px;
 154 }
 155
 156 .wp-playlist video {
 157         display: inline-block;
 158         max-width: 100%;
 159 }
 160
 161 .wp-playlist audio {
 162         display: none;
 163         max-width: 100%;
 164         width: 400px;
 165 }
 166
 167 .wp-playlist .mejs-container {
 168         margin: 0;
 169         width: 100%;
 170 }
 171
 172 .wp-playlist .mejs-controls .mejs-button button {
 173         outline: 0;
 174 }
 175
 176 .wp-playlist-light {
 177         background: #fff;
 178         color: #000;
 179 }
 180
 181 .wp-playlist-dark {
 182         color: #fff;
 183         background: #000;
 184 }
 185
 186 .wp-playlist-caption {
 187         display: block;
 188         max-width: 88%;
 189         overflow: hidden;
 190         text-overflow: ellipsis;
 191         white-space: nowrap;
 192         font-size: 14px;
 193         line-height: 1.5;
 194 }
 195
 196 .wp-playlist-item .wp-playlist-caption {
 197         text-decoration: none;
 198         color: #000;
 199         max-width: -webkit-calc(100% - 40px);
 200         max-width: calc(100% - 40px);
 201 }
 202
 203 .wp-playlist-item-meta {
 204         display: block;
 205         font-size: 14px;
 206         line-height: 1.5;
 207 }
 208
 209 .wp-playlist-item-title {
 210         font-size: 14px;
 211         line-height: 1.5;
 212 }
 213
 214 .wp-playlist-item-album {
 215         font-style: italic;
 216         overflow: hidden;
 217         text-overflow: ellipsis;
 218         white-space: nowrap;
 219 }
 220
 221 .wp-playlist-item-artist {
 222         font-size: 12px;
 223         text-transform: uppercase;
 224 }
 225
 226 .wp-playlist-item-length {
 227         position: absolute;
 228         right: 3px;
 229         top: 0;
 230         font-size: 14px;
 231         line-height: 1.5;
 232 }
 233
 234 .rtl .wp-playlist-item-length {
 235         left: 3px;
 236         right: auto;
 237 }
 238
 239 .wp-playlist-tracks {
 240         margin-top: 10px;
 241 }
 242
 243 .wp-playlist-item {
 244         position: relative;
 245         cursor: pointer;
 246         padding: 0 3px;
 247         border-bottom: 1px solid #ccc;
 248 }
 249
 250 .wp-playlist-item:last-child {
 251         border-bottom: 0;
 252 }
 253
 254 .wp-playlist-light .wp-playlist-caption {
 255         color: #333;
 256 }
 257
 258 .wp-playlist-dark .wp-playlist-caption {
 259         color: #dedede;
 260 }
 261
 262 .wp-playlist-playing {
 263         font-weight: bold;
 264         background: #f7f7f7;
 265 }
 266
 267 .wp-playlist-light .wp-playlist-playing {
 268         background: #fff;
 269         color: #000;
 270 }
 271
 272 .wp-playlist-dark .wp-playlist-playing {
 273         background: #000;
 274         color: #fff;
 275 }
 276
 277 .wp-playlist-current-item {
 278         overflow: hidden;
 279         margin-bottom: 10px;
 280         height: 60px;
 281 }
 282
 283 .wp-playlist .wp-playlist-current-item img {
 284         float: left;
 285         max-width: 60px;
 286         height: auto;
 287         margin-right: 10px;
 288         padding: 0;
 289         border: 0;
 290 }
 291
 292 .rtl .wp-playlist .wp-playlist-current-item img {
 293         float: right;
 294         margin-left: 10px;
 295         margin-right: 0;
 296 }
 297
 298 .wp-playlist-current-item .wp-playlist-item-title,
 299 .wp-playlist-current-item .wp-playlist-item-artist {
 300         overflow: hidden;
 301         text-overflow: ellipsis;
 302         white-space: nowrap;
 303 }
 304
 305 .wp-audio-playlist .me-cannotplay span {
 306         padding: 5px 15px;
 307 }