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