/* ****************************************************** * * Fichier : audiojs.css * Auteur : "Daniel C" * Création: 12 mai 2021 * Modif° : 10 sep. 2025 * Objet : Player Audio pour Ajaris websuite * ****************************************************** */ /* panel */ div.audiojs-viewer-panel {position:relative; display:flex; flex-direction:column; overflow:hidden;} div.audiojs-viewer-panel > div.audiojs-start-panel {position:absolute; inset:0px; display:flex; align-items:center; justify-content:center; z-index:10;} div.audiojs-viewer-panel > div.audiojs-start-panel > div.audiojs-start-button {width:116px; height:116px; border-radius:8px; box-sizing:border-box; background-color:#c0c0c0ad; display:flex; align-items:center; justify-content:center;} div.audiojs-viewer-panel > div.audiojs-start-panel > div.audiojs-start-button > svg {width: 50%;height: 50%;} div.audiojs-viewer-panel > div.audiojs-start-panel > div.audiojs-start-button:hover {cursor:pointer; background-color:#c0c0c0cf;} div.audiojs-viewer-panel:not(.audiojs-not-started) > div.audiojs-start-panel {display:none;} /* spectrum */ div.audiojs-viewer-panel > div.audiojs-spectrum {background-repeat:no-repeat; background-size:100% 100%; background-position:center; position:relative; flex:1;} div.audiojs-viewer-panel > div.audiojs-spectrum.audiojs-poster {background-size:contain;} div.audiojs-viewer-panel > div.audiojs-spectrum.ready {cursor:pointer;} /* spectrum - mark/title */ div.audiojs-viewer-panel > div.audiojs-spectrum div.audiojs-spectrum-mark {position:absolute; top:0px; bottom:-5px; left:0%; width:1px; background-color:fuchsia; display:none; z-index:2;} div.audiojs-viewer-panel > div.audiojs-spectrum div.audiojs-chapter-mark {position:absolute; top:0px; bottom:0px; width:1px; background-color:orange; z-index:1; pointer-events:none;} div.audiojs-viewer-panel > div.audiojs-spectrum.ready div.audiojs-spectrum-mark {display:block; transition:left 0.5s linear;} div.audiojs-viewer-panel.audiojs-notimeline > div.audiojs-spectrum div.audiojs-spectrum-mark {bottom:0px} div.audiojs-viewer-panel > div.audiojs-spectrum div.audiojs-chapter-title {position: absolute;top: 4px;left: 4px;color: snow;background-color: #f9a000;padding: 4px 6px;border-radius: 4px;font-size: 12px;font-weight: bold;z-index: 5;pointer-events: none;opacity: 0;} /* spectrum - subtitles */ div.audiojs-viewer-panel > div.audiojs-spectrum div.audiojs-subtitles-block {position: absolute;bottom: 18px;left: 16px;right: 16px;font-size: 14px;font-weight: bold;z-index: 3; pointer-events:none;font-family: sans-serif,arial;} div.audiojs-viewer-panel > div.audiojs-spectrum div.audiojs-subtitles-block span {display:none;} div.audiojs-viewer-panel > div.audiojs-spectrum div.audiojs-subtitles-block div {white-space:pre-wrap; text-align:center; pointer-events:none;} div.audiojs-viewer-panel > div.audiojs-spectrum div.audiojs-subtitles-block div {color: #f2f2f2;background-color: rgba(0,0,0,0.4);text-shadow: 0px 0px 2px black;border-radius: 1px;} div.audiojs-viewer-panel > div.audiojs-spectrum div.audiojs-subtitles-block div:not(:empty) {padding:2px 4px;} /* timeline */ div.audiojs-viewer-panel > div.audiojs-timeline-panel {height:5px; position:relative; background-color:#dedede;} div.audiojs-viewer-panel > div.audiojs-timeline-panel div.audiojs-timeline-keyword-mark {position:absolute; width:3px; top:0px; bottom:0px; cursor:pointer; background-color:red;} div.audiojs-viewer-panel > div.audiojs-timeline-panel div.audiojs-timeline-keyword-mark:hover {background-color:orange;} div.audiojs-viewer-panel > div.audiojs-timeline-panel div.audiojs-timeline-keyword-cont {position:absolute; top:-40px; width:0px; z-index:4;} div.audiojs-viewer-panel > div.audiojs-timeline-panel div.audiojs-timeline-keyword-cont div {position:relative; top:0px; left:-125px; width:250px; overflow:hidden; white-space:nowrap; text-align:center; pointer-events:none; opacity:0; line-height:12px;} div.audiojs-viewer-panel > div.audiojs-timeline-panel div.audiojs-timeline-keyword-cont div span.kw {display: inline-block;background-color: #333;color: snow;font-size: 12px;padding: 4px 5px;border-radius: 5px;font-weight: bold; max-width:100%;} div.audiojs-viewer-panel > div.audiojs-timeline-panel div.audiojs-timeline-keyword-cont div span.ts {display: block;color: #333;font-size: 12px;padding:2px; font-weight: bold; max-width:100%; text-shadow: 1px 0px white;} div.audiojs-viewer-panel.audiojs-notimeline > div.audiojs-timeline-panel {display:none;} /* controls */ div.audiojs-viewer-panel > div.audiojs-controls-panel {height:32px; background-color:#242533; display:flex; gap:8px; align-items:center; padding:0 8px;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-button {width:24px; height:24px;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-button > svg {width:inherit; height:inherit; fill:#DCDCE0; transition:fill 0.2s ease-in-out;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-button.audiojs-control-button-subtitles {position:relative;} div.audiojs-viewer-panel > div.audiojs-controls-panel .audiojs-control-content {position:absolute; bottom:0px; right:0px; background-color:#242533; color:#DCDCE0; z-index:10; padding:8px; border-radius:4px;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-button > .audiojs-control-content {bottom:28px; cursor:default;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-button > .audiojs-control-content > span.audiojs-control-text {background-color:#424352; display:block; padding:4px;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-button > .audiojs-control-content > div.audiojs-menu {} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-button > .audiojs-control-content > div.audiojs-menu > ul.audiojs-menu-content {list-style-type:none; margin:0; padding:2px 0px; max-width:140px; text-align:left;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-button > .audiojs-control-content > div.audiojs-menu > ul.audiojs-menu-content > li.audiojs-menu-item {margin:0; padding:6px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-button > .audiojs-control-content > div.audiojs-menu > ul.audiojs-menu-content > li.audiojs-menu-item.audiojs-emphasis {font-style:italic; font-weight:normal;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-button > .audiojs-control-content > div.audiojs-menu > ul.audiojs-menu-content > li.audiojs-menu-item.audiojs-selected {font-weight:bold;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-button > .audiojs-control-content > div.audiojs-menu > ul.audiojs-menu-content > li.audiojs-menu-item:not(.audiojs-selected) {cursor:pointer;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-button:hover {cursor:pointer;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-button:hover > svg {cursor:pointer; fill:#E9E9EB;} div.audiojs-viewer-panel > div.audiojs-controls-panel .audiojs-hidden, div.audiojs-viewer-panel > div.audiojs-controls-panel .audiojs-lock-showing {display:none;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-time {font-weight:bold; display:inline-flex; gap:4px; color:#DCDCE0;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-flexer {flex:1;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-volume {width:20%; height:20px; position:relative; box-sizing:border-box; margin-right:16px;} div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-volume > div.audiojs-control-volume-handle {position:absolute; border-radius:8px; width:16px; height:16px; z-index:2; background-color:#DCDCE0; top:2px; outline:1px solid #8C909F; pointer-events:none;} /* div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-volume > div.audiojs-control-volume-handle:hover {background-color:#0073ea;} */ div.audiojs-viewer-panel > div.audiojs-controls-panel div.audiojs-control-volume > div.audiojs-control-volume-bar {position:absolute; border-radius:8px; height:6px; z-index:1; background-color:#DCDCE0; top:8px; right:-10px; left:5px;} div.audiojs-viewer-panel.audiojs-nocontrols > div.audiojs-controls-panel {display:none;} div.audiojs-viewer-panel.audiojs-smallcontrols > div.audiojs-controls-panel {height:24px; gap:4px;} div.audiojs-viewer-panel.audiojs-smallcontrols > div.audiojs-controls-panel div.audiojs-control-button {width:16px; height:16px;} div.audiojs-viewer-panel.audiojs-smallcontrols > div.audiojs-controls-panel div.audiojs-control-time {font-size:0.8em;} div.audiojs-viewer-panel.audiojs-smallcontrols > div.audiojs-controls-panel div.audiojs-control-volume {height:16px; margin-right:18px;} div.audiojs-viewer-panel.audiojs-smallcontrols > div.audiojs-controls-panel div.audiojs-control-volume > div.audiojs-control-volume-handle {top:1px; width:14px; height:14px;} div.audiojs-viewer-panel.audiojs-smallcontrols > div.audiojs-controls-panel div.audiojs-control-volume > div.audiojs-control-volume-bar {top:7px; left:8px; height:4px;} div.audiojs-viewer-panel.audiojs-smallcontrols > div.audiojs-controls-panel div.audiojs-control-button > .audiojs-control-content {bottom:12px;} /* wave-loader */ div.wave-loader {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: flex;align-items: center; pointer-events:none;} div.wave-loader span {height: 10px;width: 6px;margin-right: 3px;background-color: #a0a0a0;animation: wavesloading 0.8s linear infinite;} div.wave-loader span:nth-child(1) {animation-delay: 0.1s;} div.wave-loader span:nth-child(2) {animation-delay: 0.2s;} div.wave-loader span:nth-child(3) {animation-delay: 0.3s;} div.wave-loader span:nth-child(4) {animation-delay: 0.4s;} div.wave-loader span:nth-child(5) {animation-delay: 0.5s;} @keyframes wavesloading { 0%{height: 0;} 25%{height: 40px;} 50%{height: 60px;} 100%{height: 0;} }