style.css
154 lines
| 1 | .wcmp-player{width:100% !important;} |
| 2 | .wcmp-player-container{width:100%;overflow-x:clip;} |
| 3 | .wc-block-components-product-name:has(.wcmp-player-container), |
| 4 | .wp-block-post-title:has(.wcmp-player-container){word-break:normal;} |
| 5 | .wc-block-components-product-name .wcmp-player-container:has(.wcmp-player.track), |
| 6 | .wp-block-post-title .wcmp-player-container:has(.wcmp-player.track){display:inline;} |
| 7 | |
| 8 | .wcmp-player.track.mejs-wmp .mejs-controls, |
| 9 | .wcmp-player.track.mejs-wmp .mejs-controls::before{background:transparent !important;} |
| 10 | .wcmp-player.mejs-wmp:not(.track), |
| 11 | .wcmp-player.mejs-ted:not(.track){min-height:65px !important;} |
| 12 | .wcmp-player.mejs-container:not(.wcmp-custom-skin){background: transparent !important;} |
| 13 | .wcmp-player.mejs-container{margin-bottom:0;} |
| 14 | .wcmp-player.track{width:25px !important;height:26px !important;position:relative;float:left;margin-right:5px;overflow:hidden;} |
| 15 | .wcmp-player.track.mejs-ted{width:49px !important;height:28px !important;border-radius:16%;} |
| 16 | .wcmp-player.track.mejs-ted .mejs-controls{height:28px !important; background:transparent !important;} |
| 17 | .wcmp-player.track.mejs-wmp .mejs-playpause-button, |
| 18 | .wcmp-player.track.mejs-ted .mejs-playpause-button{top:0 !important;left:0 !important; margin: 0 !important;} |
| 19 | |
| 20 | .wcmp-player.track.mejs-wmp{width:40px !important;height:40px !important;} |
| 21 | .wcmp-player.track.mejs-wmp .mejs-controls{height:40px !important; width:40px !important; background:transparent !important;} |
| 22 | |
| 23 | .wcmp-player:not(.track){min-width:200px !important;position:relative;} |
| 24 | |
| 25 | .wcmp-player .mejs-currenttime, |
| 26 | .wcmp-player .mejs-duration{white-space:nowrap;} |
| 27 | .wcmp-player .mejs-time-total.mejs-time-slider{overflow-x: clip;} |
| 28 | |
| 29 | .wcmp-player-list{width:100%; border:0;overflow:visible;margin-bottom:10px;} |
| 30 | .wcmp-player-list *{word-break:normal !important;} |
| 31 | .wcmp-player-list td{border:0;padding:5px;} |
| 32 | .wcmp-player-list table{width:100%;margin:0;} |
| 33 | .wcmp-player-list table tr, |
| 34 | .wcmp-player-list table td{border:0;} |
| 35 | .wcmp-odd-row td, |
| 36 | .wcmp-even-row td{padding:5px;vertical-align:middle;} |
| 37 | .wcmp-odd-row td{background-color:#FAFAFA; border-top: 1px solid #DADADA; border-bottom: 1px solid #DADADA;} |
| 38 | .wcmp-column-player-title{/* width:100%; */ vertical-align:middle;} |
| 39 | .wcmp-column-player-title:not(td){display:flex;} |
| 40 | .wcmp-column-player-title .wcmp-file-duration {flex-grow: 1;text-align:right;font-size:16px;align-self:center;} |
| 41 | .wcmp-column-player-mejs-classic{width:30px; min-height:30px;} |
| 42 | .wcmp-column-player-mejs-ted{width:54px; min-height:28px;} |
| 43 | .wcmp-column-player-mejs-wmp{width:45px; min-height:40px;} |
| 44 | .wcmp-message{font-style:italic;} |
| 45 | .mejs-controls{/* overflow:hidden !important; */} |
| 46 | .wcmp-player .mejs-controls .mejs-time-rail .mejs-time-float{border:0;} |
| 47 | |
| 48 | .wcmp-player .mejs-time-hovered, |
| 49 | .wcmp-player .mejs-time-handle-content{display:none !important;} |
| 50 | .wcmp-player .mejs-controls .mejs-time{height:auto;} |
| 51 | .wcmp-player .mejs-controls .mejs-time-rail .mejs-time-buffering, |
| 52 | .wcmp-player .mejs-controls .mejs-time-rail .mejs-time-current, |
| 53 | .wcmp-player .mejs-controls .mejs-time-rail .mejs-time-hovered, |
| 54 | .wcmp-player .mejs-controls .mejs-time-rail .mejs-time-loaded{width:100%;} |
| 55 | |
| 56 | .wcmp-player.mejs-wmp .mejs-time-rail{height:26px; padding-top:0;} |
| 57 | .wcmp-player.mejs-ted .mejs-time-rail{height:26px; padding:5px 0;margin:0;} |
| 58 | .wcmp-player.mejs-wmp .mejs-time{padding:10px 3px 0;} |
| 59 | .wcmp-player.mejs-ted .mejs-time{padding:2px 3px 0;height:17px;} |
| 60 | .wcmp-player.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-total { |
| 61 | background: #333; |
| 62 | background: rgba(50,50,50,.8); |
| 63 | background: -webkit-gradient(linear,0 0,0 100%,from(rgba(30,30,30,.8)),to(rgba(60,60,60,.8))); |
| 64 | background: -webkit-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8)); |
| 65 | background: -moz-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8)); |
| 66 | background: -o-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8)); |
| 67 | background: -ms-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8)); |
| 68 | background: linear-gradient(rgba(30,30,30,.8),rgba(60,60,60,.8)); |
| 69 | } |
| 70 | |
| 71 | .wcmp-player.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-current{background:rgba(203,0,3,.3) !important;} |
| 72 | .wcmp-player.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-current{left:0;} |
| 73 | |
| 74 | .wcmp-player.track.mejs-classic .mejs-controls{padding:0 !important; height:26px;} |
| 75 | .wcmp-player.track.mejs-classic .mejs-playpause-button button{position: absolute;top: 50%;left: 50%;margin:0;transform: translate(-50%, -50%);} |
| 76 | |
| 77 | .wcmp-purchased-times{display:inline-block;margin-left:10px;margin-right:10px;font-size:0.8em;} |
| 78 | .mini_cart_item .wcmp-player{display:none !important;} |
| 79 | .wcmp-classic-layout .wcmp-download-links{padding:0 5px;display:block;border-top: 1px dashed #D0D0D0;margin-top:5px;} |
| 80 | .wcmp-new-layout .wcmp-download-links{padding-left:10px;} |
| 81 | |
| 82 | /* Single Player */ |
| 83 | .wcmp-single-player{position:relative;} |
| 84 | .wcmp-single-player .wcmp-player-container:not(.wcmp-first-player){display:none;z-index:9999;position:absolute;} |
| 85 | .wcmp-single-player .wcmp-player-title{cursor:pointer;} |
| 86 | .wcmp-single-player .wcmp-player-title.wcmp-playing{font-weight:bold;} |
| 87 | .wcmp-single-player .wcmp-player-title.wcmp-playing::before{content: '\1F782';margin-right:10px;} |
| 88 | .wcmp-single-player.merge_in_grouped_products .wcmp-player-title.wcmp-playing::before{display:none !important;} |
| 89 | /* table.wcmp-single-player.merge_in_grouped_products{margin:0 !important;} */ |
| 90 | .wcmp-single-player.merge_in_grouped_products .wcmp-odd-row>td, |
| 91 | .wcmp-single-player.merge_in_grouped_products .wcmp-even-row>td{padding:0;} |
| 92 | .wcmp-single-player.merge_in_grouped_products .wcmp-column-player-title>table{margin:0 !important;} |
| 93 | |
| 94 | .wcmp-download-link{font-weight:700;} |
| 95 | |
| 96 | /* wcmp-player-visualizer */ |
| 97 | |
| 98 | .wcmp-player-visualizer { |
| 99 | width: 100%; |
| 100 | height: 80px; |
| 101 | overflow: hidden; |
| 102 | display: flex; |
| 103 | flex-direction: column; |
| 104 | align-items: center; |
| 105 | position:relative; |
| 106 | } |
| 107 | |
| 108 | .wcmp-player-visualizer-bars-container { |
| 109 | top: 0; |
| 110 | bottom: 0; |
| 111 | left:0; |
| 112 | right:0; |
| 113 | display: flex; |
| 114 | flex-wrap: nowrap; |
| 115 | justify-content: space-around; |
| 116 | align-items: flex-end; |
| 117 | gap: 4px; |
| 118 | background: transparent; |
| 119 | padding: 5px 0; |
| 120 | box-sizing: border-box; |
| 121 | overflow: hidden; |
| 122 | position:absolute; |
| 123 | } |
| 124 | |
| 125 | .wcmp-player-visualizer-bar { |
| 126 | flex: 0 0 4px; |
| 127 | height: 0; |
| 128 | background: repeating-linear-gradient( |
| 129 | to top, |
| 130 | rgba(255, 255, 255, 0) 0px, |
| 131 | rgba(255, 255, 255, 0) 1px, |
| 132 | rgba(0, 115, 170, 1) 2px, |
| 133 | rgba(0, 115, 170, 1) 3px |
| 134 | ); |
| 135 | opacity: 0.85; |
| 136 | box-shadow: 0 0 8px rgba(255, 255, 255, 0.25); |
| 137 | border-radius: 3px; |
| 138 | transition: height 0.08s ease-out, opacity 0.08s ease-out; |
| 139 | } |
| 140 | |
| 141 | .wcmp-player-container:has( .mejs-wmp ) .wcmp-player-visualizer{padding-left:20px; padding-right:20px;} |
| 142 | .wcmp-player-container:has( .mejs-ted ) .wcmp-player-visualizer{padding:10px 10px 5px 10px;background:#eee;height:50px;} |
| 143 | .wcmp-player-container:has( .mejs-ted ) .wcmp-player-visualizer-bar{ |
| 144 | background: linear-gradient(to top, #606368, #a1a4a8); |
| 145 | background: repeating-linear-gradient( |
| 146 | to top, |
| 147 | rgba(255, 255, 255, 0) 0px, |
| 148 | rgba(255, 255, 255, 0) 1px, |
| 149 | rgba(0, 0, 0, 0.5) 2px, |
| 150 | rgba(0, 0, 0, 0.5) 3px |
| 151 | ); |
| 152 | box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.25); |
| 153 | opacity: 0.5 !important; |
| 154 | } |