CSS   120
wp mediaelement css
Guest on 8th March 2023 12:32:27 AM


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

Login or Register to edit or fork this paste. It's free.