Download:
Patch
child 37:a8a87d02cf00
parent 35:c413694d4564
36:07aedd01fe23
Anton Shestakov <av6@dwimlabs.net>, Fri, 06 Jul 2018 19:55:19 +0800
index: move styles to player.css And not using gradient UIkit theme actually reduces CPU usage a lot.
2 файлов изменено, 77 вставок(+), 16 удалений(-) [+]
index.html file | annotate | diff | comparison | revisions
player.css file | annotate | diff | comparison | revisions 
--- a/index.html	Tue Jun 26 00:50:58 2018 +0800
+++ b/index.html	Fri Jul 06 19:55:19 2018 +0800
@@ -1,31 +1,22 @@
 <!DOCTYPE html>
-<html>
+<html style="background: #000; color: #828282;">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <title></title>
-    <link rel="stylesheet" href="/libs/uikit/2.27.5/css/uikit.gradient.min.css">
-    <link rel="stylesheet" href="/libs/uikit/2.27.5/css/components/progress.gradient.min.css">
+    <link rel="stylesheet" href="/libs/uikit/2.27.5/css/uikit.min.css">
+    <link rel="stylesheet" href="/libs/uikit/2.27.5/css/components/progress.min.css">
+    <link rel="stylesheet" href="/player.css">
 
     <script src="/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="/libs/underscore/1.9.1/underscore-min.js"></script>
     <script src="/libs/backbone/1.3.3/backbone-min.js"></script>
     <script src="/libs/rivets/0.9.4/rivets.bundled.min.js"></script>
-
-    <style>
-      .uk-progress-bar {
-        -webkit-transition: none;
-        transition: none;
-      }
-      .file-box {
-        resize: vertical;
-      }
-    </style>
   </head>
   <body>
-    <div class="uk-container uk-container-center">
+    <div class="uk-container uk-container-center gme-player">
       <div class="uk-grid uk-margin-top">
         <div class="uk-width-medium-1-2">
           <div class="uk-scrollable-box file-box">
@@ -44,7 +35,7 @@
           </script>
         </div>
         <div class="uk-width-medium-1-2">
-          <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-hidden" data-front>
+          <div class="uk-panel uk-hidden" data-front>
             <h3 class="uk-panel-title" rv-text="player:track:song"></h3>
             <p>
               <span rv-text="player:track:author"></span>
@@ -95,7 +86,7 @@
         <tbody data-tracks></tbody>
       </table>
 
-      <pre style="white-space: pre-wrap; word-break: break-all; word-wrap: break-word;" data-debug></pre>
+      <pre data-debug></pre>
     </div>
 
     <script type="text/template" id="track-template">
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/player.css	Fri Jul 06 19:55:19 2018 +0800
@@ -0,0 +1,70 @@
+/* Colors are mostly taken from a screenshot of Silent Night v.6 theme for
+ * foobar2000 by Arnie77. */
+
+.gme-player .uk-progress {
+    background: #0e0e0e;
+    border: 1px solid #000;
+    box-shadow: 0 1px 0 0 #434343;
+}
+.gme-player .uk-progress-bar {
+    -webkit-transition: none;
+    transition: none;
+    background: #693191;
+    box-shadow: inset 0 1px 0 0 #9f4bd8;
+}
+.gme-player .file-box {
+    resize: vertical;
+    border-color: #202020;
+}
+.gme-player .uk-button {
+    color: #693191;
+    background: linear-gradient(#2b2b2b, #1a1a1a);
+    border: 1px solid #000;
+    box-shadow: inset 0 1px 0 0 #3b3b3b, 0 1px 0 0 #434343;
+}
+.gme-player .uk-button.uk-active,
+.gme-player .uk-button:active {
+    color: #9f4bd8;
+    background: #1b1b1b;
+    box-shadow: inset 0 1px 5px 0 #0e0e0e, 0 1px 0 0 #434343;
+}
+.gme-player .uk-button:focus,
+.gme-player .uk-button:hover {
+    color: #9f4bd8;
+    box-shadow: 0 1px 0 0 #434343;
+}
+.gme-player .uk-button-group > .uk-button:nth-child(n+2),
+.gme-player .uk-button-group > div:nth-child(n+2) .uk-button {
+    margin-left: -1px;
+}
+.gme-player .uk-nav-side > li > a {
+    color: #828282;
+}
+.gme-player .uk-nav-side > li > a:focus,
+.gme-player .uk-nav-side > li > a:hover {
+    color: #9f4bd8;
+    background: #1b1b1b;
+}
+.gme-player .uk-table {
+    color: #828282;
+}
+.gme-player .uk-table tbody tr.uk-active {
+    background: #1b1b1b;
+}
+.gme-player .uk-panel {
+    background: linear-gradient(#2d2d2d, #151515);
+    border-top: 1px solid #3b3b3b;
+    border-bottom: 1px solid #1a1a1a;
+    color: #828282;
+    padding: 15px;
+}
+.gme-player .uk-panel-title {
+    color: #aaa;
+}
+.gme-player pre {
+    color: #828282;
+    background: #1b1b1b;
+    white-space: pre-wrap;
+    word-break: break-all;
+    word-wrap: break-word;
+}