Download:
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 files changed, 77 insertions(+), 16 deletions(-) [+]
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;
+}