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: #0073aa;
  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: #0073aa;
  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 .remove-setting {
 110         color: #a00;
 111         font-size: 10px;
 112         text-transform: uppercase;
 113 }
 114
 115 .media-embed-details .setting .remove-setting {
 116         padding: 0;
 117 }
 118
 119 .media-embed-details .setting a:hover {
 120         color: #f00;
 121 }
 122
 123 .media-embed-details .embed-media-settings .checkbox-setting {
 124         float: none;
 125         margin: 0 0 10px;
 126 }
 127
 128 .wp-video {
 129         max-width: 100%;
 130         height: auto;
 131 }
 132
 133 .wp_attachment_holder .wp-video,
 134 .wp_attachment_holder .wp-audio-shortcode {
 135         margin-top: 18px;
 136 }
 137
 138 video.wp-video-shortcode,
 139 .wp-video-shortcode video {
 140         max-width: 100%;
 141         display: inline-block;
 142 }
 143
 144 .video-details .wp-video-holder {
 145         width: 100%;
 146         max-width: 640px;
 147 }
 148
 149 .wp-playlist {
 150         border: 1px solid #ccc;
 151         padding: 10px;
 152         margin: 12px 0 18px;
 153         font-size: 14px;
 154         line-height: 1.5;
 155 }
 156
 157 .wp-admin .wp-playlist {
 158         margin: 0 0 18px;
 159 }
 160
 161 .wp-playlist video {
 162         display: inline-block;
 163         max-width: 100%;
 164 }
 165
 166 .wp-playlist audio {
 167         display: none;
 168         max-width: 100%;
 169         width: 400px;
 170 }
 171
 172 .wp-playlist .mejs-container {
 173         margin: 0;
 174         width: 100%;
 175 }
 176
 177 .wp-playlist .mejs-controls .mejs-button button {
 178         outline: 0;
 179 }
 180
 181 .wp-playlist-light {
 182         background: #fff;
 183         color: #000;
 184 }
 185
 186 .wp-playlist-dark {
 187         color: #fff;
 188         background: #000;
 189 }
 190
 191 .wp-playlist-caption {
 192         display: block;
 193         max-width: 88%;
 194         overflow: hidden;
 195         text-overflow: ellipsis;
 196         white-space: nowrap;
 197         font-size: 14px;
 198         line-height: 1.5;
 199 }
 200
 201 .wp-playlist-item .wp-playlist-caption {
 202         text-decoration: none;
 203         color: #000;
 204         max-width: -webkit-calc(100% - 40px);
 205         max-width: calc(100% - 40px);
 206 }
 207
 208 .wp-playlist-item-meta {
 209         display: block;
 210         font-size: 14px;
 211         line-height: 1.5;
 212 }
 213
 214 .wp-playlist-item-title {
 215         font-size: 14px;
 216         line-height: 1.5;
 217 }
 218
 219 .wp-playlist-item-album {
 220         font-style: italic;
 221         overflow: hidden;
 222         text-overflow: ellipsis;
 223         white-space: nowrap;
 224 }
 225
 226 .wp-playlist-item-artist {
 227         font-size: 12px;
 228         text-transform: uppercase;
 229 }
 230
 231 .wp-playlist-item-length {
 232         position: absolute;
 233         right: 3px;
 234         top: 0;
 235         font-size: 14px;
 236         line-height: 1.5;
 237 }
 238
 239 .rtl .wp-playlist-item-length {
 240         left: 3px;
 241         right: auto;
 242 }
 243
 244 .wp-playlist-tracks {
 245         margin-top: 10px;
 246 }
 247
 248 .wp-playlist-item {
 249         position: relative;
 250         cursor: pointer;
 251         padding: 0 3px;
 252         border-bottom: 1px solid #ccc;
 253 }
 254
 255 .wp-playlist-item:last-child {
 256         border-bottom: 0;
 257 }
 258
 259 .wp-playlist-light .wp-playlist-caption {
 260         color: #333;
 261 }
 262
 263 .wp-playlist-dark .wp-playlist-caption {
 264         color: #ddd;
 265 }
 266
 267 .wp-playlist-playing {
 268         font-weight: bold;
 269         background: #f7f7f7;
 270 }
 271
 272 .wp-playlist-light .wp-playlist-playing {
 273         background: #fff;
 274         color: #000;
 275 }
 276
 277 .wp-playlist-dark .wp-playlist-playing {
 278         background: #000;
 279         color: #fff;
 280 }
 281
 282 .wp-playlist-current-item {
 283         overflow: hidden;
 284         margin-bottom: 10px;
 285         height: 60px;
 286 }
 287
 288 .wp-playlist .wp-playlist-current-item img {
 289         float: left;
 290         max-width: 60px;
 291         height: auto;
 292         margin-right: 10px;
 293         padding: 0;
 294         border: 0;
 295 }
 296
 297 .rtl .wp-playlist .wp-playlist-current-item img {
 298         float: right;
 299         margin-left: 10px;
 300         margin-right: 0;
 301 }
 302
 303 .wp-playlist-current-item .wp-playlist-item-title,
 304 .wp-playlist-current-item .wp-playlist-item-artist {
 305         overflow: hidden;
 306         text-overflow: ellipsis;
 307         white-space: nowrap;
 308 }
 309
 310 .wp-audio-playlist .me-cannotplay span {
 311         padding: 5px 15px;
 312 }