une belle fenêtre winxp pour le lecteur audio

on peut dragger pis toute pis toute

assets/css/oof.css

@@ -1,21 +1,22 @@
-html {
+/* Works on Firefox */
-    --scrollbarBG: #4B0082;
+* {
-    --thumbBG: #FF69B4;
+  scrollbar-width: thin;
-    overflow: hidden;
+  scrollbar-color: #FF69B4 #4B0082;
 }
 
-body::-webkit-scrollbar {
+/* Works on Chrome, Edge, and Safari */
-    width: 11px;
+*::-webkit-scrollbar {
+  width: 12px;
 }
 
-body::-webkit-scrollbar-track {
+*::-webkit-scrollbar-track {
-    background: var(--scrollbarBG);
+  background: #4B0082;
 }
 
-body::-webkit-scrollbar-thumb {
+*::-webkit-scrollbar-thumb {
-    background-color: var(--thumbBG);
+  background-color: #FF69B4;
-    border-radius: 6px;
+  border-radius: 20px;
-    border: 3px solid var(--scrollbarBG);
+  border: 3px solid #4B0082;
 }
 
 body {
@@ -23,15 +24,13 @@ body {
     background-repeat: no-repeat;
     background-attachment: fixed;
     height: 100vh;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
 }
 
 .fixedep {
     position: -webkit-sticky;
     position: sticky;
     top: 20px;
+    cursor: move;
 }
 
 .star {
@@ -69,4 +68,4 @@ body {
 #ws:active {
   text-decoration: none;
   color: inherit;
-}
+}

assets/js/site.js

@@ -29,6 +29,8 @@ jQuery(function($) {
       dateFormat: 'DD/MM/YYYY',
       dateLocale: 'fr-ca',
     });
+
+    
   });
 
   function play(src, title, date) {
@@ -47,4 +49,22 @@ jQuery(function($) {
 
   function switchTab() {
       $('[href="#ep"]').tab('show');
-  }
+  }
+
+  $( function() {
+    $( "#draggable" ).draggable();
+    $("#draggable").data({
+      'originalLeft': $("#draggable").css('left'),
+      'origionalTop': $("#draggable").css('top')
+      });
+      $(".reset").click(function() {
+        $("#draggable").css({
+          'left': $("#draggable").data('originalLeft'),
+        'top': $("#draggable").data('origionalTop')
+          });
+      });
+  } );
+
+  
+
+ 

index.html

@@ -14,10 +14,12 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
     <link rel="stylesheet" href="assets/css/xp.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <script src="assets/js/jquery.rss.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
     <script src="assets/js/site.js"></script>
     <script src="assets/js/script.min.js"></script>
-    <script src="assets/js/jquery.rss.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
 
 </head>
@@ -75,6 +77,7 @@
                 <li class="nav-item text-uppercase text-left" role="presentation" style="border-style: none;"><a class="nav-link text-monospace text-center" role="tab" data-toggle="pill" data-bss-hover-animate="bounce" href="#comm" style="background: var(--success);color: var(--white);">commentaires</a></li>
             </ul>
             <div class="tab-content d-inline-flex justify-content-center" style="width: 75%;border-style: dotted;background:var(--danger);box-shadow: 8px 9px var(--warning);">
+                
                 <!-- ACCUEIL -->
                 <div class="tab-pane active" role="tabpanel" id="home" style="text-align: center;padding: 0px;">
                     <p class="text-center" style="padding: 0px;padding-top: 10px;color: var(--yellow);font-size: 32px;font-family: 'Comic Neue', cursive;">
@@ -112,13 +115,13 @@
                 <!-- ÉPISODES -->
                 <div class="tab-pane" role="tabpanel" id="ep">
                     <div class="fixedep">
-                        <div class="window" style="width: 55%; margin: auto; margin-top: 10px; margin-bottom: 10px; ">
+                        <div id="draggable" class="window" style="width: 55%; margin: auto; margin-top: 10px; margin-bottom: 10px; ">
                             <div class="title-bar" style="padding-top: 15px; padding-bottom: 15px;">
                                 <div class="title-bar-text">
                                     Épisode en cours
                                 </div>
                                 <div class="title-bar-controls">
-                                    <button aria-label="Close"></button>
+                                    <button class="reset" aria-label="Close"></button>
                                 </div>
                             </div>
                             <div class="window-body" style="font-size: medium;">
@@ -130,7 +133,6 @@
                             </audio>
                             </div>
                         </div>
-
                     </div>
                     <div id="rss-feeds"></div>
                 </div>
@@ -163,7 +165,7 @@
                     class="fas fa-podcast"></i></a>
             <script type="text/javascript" src="https://counter.websiteout.net/js/24/5/0/1"></script>
             <!-- ZXogY2xhcG8gbGUgam91cm5hbCBkdW4gcG9kY2FzdC4gbGEgcmVmZXJlbmNlIGVuIDIwMjEu -->
-            <!-- V1.03 // 14 JUIN 2021 // 1.14AM -->
+            <!-- V1.04 // 20 JUIN 2021 // 10.25AM -->
     </footer>
 </body>
 </html>