Tidy up the HTML and CSS for audiobooks

cps/static/css/listen.css

@@ -0,0 +1,114 @@
+.sm2-bar-ui {
+    font-size: 20px;
+  }
+
+  .sm2-bar-ui.compact {
+    max-width: 90%;
+  }
+
+  .sm2-progress .sm2-progress-ball {
+    width: .5333em;
+    height: 1.9333em;
+    border-radius: 0em;
+  }
+
+  .sm2-progress .sm2-progress-track {
+    height: 0.15em;
+    background: white;
+  }
+
+  .sm2-bar-ui .sm2-main-controls,
+  .sm2-bar-ui .sm2-playlist-drawer {
+    background-color: transparent;
+  }
+
+  .sm2-bar-ui .sm2-inline-texture {
+    background: transparent;
+  }
+
+  .rating .glyphicon-star {
+    color: gray;
+  }
+
+  .rating .glyphicon-star.good {
+    color: white;
+  }
+
+  body {
+    overflow: hidden;
+    background: #272B30;
+    color: #aaa;
+  }
+
+  #main {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  #area {
+    width: 80%;
+    height: 80%;
+    margin: 5% auto;
+    max-width: 1250px;
+  }
+
+  #area iframe {
+    border: none;
+  }
+
+  #prev {
+    left: 40px;
+  }
+
+  #next {
+    right: 40px;
+  }
+
+  .arrow {
+    position: absolute;
+    top: 50%;
+    margin-top: -32px;
+    font-size: 64px;
+    color: #E2E2E2;
+    font-family: arial, sans-serif;
+    font-weight: bold;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
+  .arrow:hover {
+    color: #777;
+  }
+
+  .arrow:active {
+    color: #000;
+  }
+
+  xmp,
+  pre,
+  plaintext {
+    display: block;
+    font-family: -moz-fixed;
+    white-space: pre;
+    margin: 1em 0;
+  }
+
+  #area {
+    overflow: hidden;
+  }
+
+  pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    font-family: -moz-fixed;
+    column-count: 2;
+    -webkit-columns: 2;
+    -moz-columns: 2;
+    column-gap: 20px;
+    -moz-column-gap: 20px;
+    -webkit-column-gap: 20px;
+    position: relative;
+  }

cps/templates/listenmp3.html

@@ -17,131 +17,11 @@
   <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
   <link href="{{ url_for('static', filename='css/libs/bootstrap.min.css') }}" rel="stylesheet" media="screen">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/libs/bar-ui.css') }}" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/listen.css') }}" />
 
-  <!-- <link rel="stylesheet" href="{{ url_for('static', filename='css/libs/normalize.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/libs/normalize.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/popup.css') }}"> -->
-
-  <style type="text/css">
-    .sm2-bar-ui {
-      font-size: 20px;
-    }
-
-    .sm2-bar-ui.compact {
-      max-width: 90%;
-    }
-
-    .sm2-progress .sm2-progress-ball {
-      width: .5333em;
-      height: 1.9333em;
-      border-radius: 0em;
-    }
-
-    .sm2-progress .sm2-progress-track {
-      height: 0.15em;
-      background: white;
-    }
-
-    .sm2-bar-ui .sm2-main-controls,
-    .sm2-bar-ui .sm2-playlist-drawer {
-      background-color: transparent;
-    }
-
-    .sm2-bar-ui .sm2-inline-texture {
-      background: transparent;
-    }
-
-    .rating .glyphicon-star {
-      color: gray;
-    }
-
-    .rating .glyphicon-star.good {
-      color: white;
-    }
-
-    body {
-      overflow: hidden;
-      background: #272B30;
-      color: #aaa;
-    }
-
-    #main {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-
-    #area {
-      width: 80%;
-      height: 80%;
-      margin: 5% auto;
-      max-width: 1250px;
-    }
-
-    #area iframe {
-      border: none;
-    }
-
-    #prev {
-      left: 40px;
-    }
-
-    #next {
-      right: 40px;
-    }
-
-    .arrow {
-      position: absolute;
-      top: 50%;
-      margin-top: -32px;
-      font-size: 64px;
-      color: #E2E2E2;
-      font-family: arial, sans-serif;
-      font-weight: bold;
-      cursor: pointer;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      user-select: none;
-    }
-
-    .arrow:hover {
-      color: #777;
-    }
-
-    .arrow:active {
-      color: #000;
-    }
-
-    xmp,
-    pre,
-    plaintext {
-      display: block;
-      font-family: -moz-fixed;
-      white-space: pre;
-      margin: 1em 0;
-    }
-
-    #area {
-      overflow: hidden;
-    }
-
-    pre {
-      white-space: pre-wrap;
-      word-wrap: break-word;
-      font-family: -moz-fixed;
-      column-count: 2;
-      -webkit-columns: 2;
-      -moz-columns: 2;
-      column-gap: 20px;
-      -moz-column-gap: 20px;
-      -webkit-column-gap: 20px;
-      position: relative;
-    }
-  </style>
-
-  <script>
-    "use strict";
-  </script>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/popup.css') }}">
 
 </head>
 
@@ -160,11 +40,13 @@
       <div class="rating">
         <p>
           {% for number in range((entry.ratings[0].rating/2)|int(2)) %}
-          <span class="glyphicon glyphicon-star good"></span>
-          {% if loop.last and loop.index
-          < 5 %} {% for numer in range(5 - loop.index) %} <span class="glyphicon glyphicon-star">
-            </span>
-            {% endfor %} {% endif %} {% endfor %}
+            <span class="glyphicon glyphicon-star good"></span>
+            {% if loop.last and loop.index < 5 %}
+              {% for numer in range(5 - loop.index) %}
+                <span class="glyphicon glyphicon-star"></span>
+              {% endfor %}
+            {% endif %}
+          {% endfor %}
         </p>
       </div>
       {% endif %}
@@ -212,7 +94,6 @@
               <div class="sm2-inline-duration">0:00</div>
             </div>
           </div>
-
         </div>
 
         <div class="sm2-inline-element sm2-button-element sm2-volume">
@@ -221,7 +102,6 @@
             <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
           </div>
         </div>
-
       </div>
 
       <div class="bd sm2-playlist-drawer sm2-element">
@@ -239,9 +119,7 @@
             </li>
           </ul>
         </div>
-
       </div>
-
     </div>
 
     <script>
@@ -254,7 +132,7 @@
         useBookmarks: {{ g.user.is_authenticated | tojson }}
             };
     </script>
-
+  </div>
 </body>
 
 </html>