Skip to content

Commit

Permalink
Return background page and format code. (#36)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tryasko
tryasko authored Feb 23, 2018
1 parent 877ad0f commit 4bea1a0
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 170 deletions.
10 changes: 10 additions & 0 deletions background/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script src="./updater.js"></script>
<script src="./player.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"background": {
"scripts": ["./background/updater.js", "./background/player.js"]
"page": "background/index.html"
},
"browser_action": {
"default_popup": "popup/index.html"
Expand Down
338 changes: 169 additions & 169 deletions popup/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,170 +1,170 @@
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css" rel="stylesheet">
* {
margin: 0;
padding: 0;
}

body {
width: 234px;
background-color: #fcfcfc;
}

.controls {
height: 57px;
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-color: #5E82A8;

border-bottom: 5px solid #fcfcfc;
}

#cnt_play {
width: 32px;
height: 32px;
cursor: pointer;
position: absolute;
top: 13px;
left: 19px;
background-image: url('img/buttons.png');
background-repeat: no-repeat;
}

.stopped {
background-position: 0 0;
}

.stopped:hover {
background-position: -32px 0;
}

.stopped:active {
background-position: -64px 0;
}

.played {
background-position: 0 -32px;
}

.played:hover {
background-position: -32px -32px;
}

.played:active {
background-position: -64px -32px;
}

#play_list {
width: 234px;
height: 203px;
overflow: hidden;
overflow-y: auto;
list-style: none;
}

#play_list li {
height: 24px;
display: flex;
padding-left: 24px;
cursor: pointer;
font-family: verdana, tahoma, arial, sans-serif;
font-size: 12px;
line-height: 24px;
color: #212121;
}

#play_list li .group {
width: 24px;
font-size: 9px;
color: #888;
font-weight: 100;
}

#play_list li .name {
flex: 1;
}

#play_list li:hover {
background: #e2e5e9;
}

#play_list li.selected {
background: #5E82A8;
}

#play_list li.selected .group {
color: #ccc;
}

#play_list li.selected .name {
color: #f1f1f1;
}

.bottom {
height: 16px;
padding: 2px 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
text-align: center;
background-color: #5E82A8;

border-top: 5px solid #fcfcfc;
}
</style>

<style type="text/css" rel="stylesheet">
input[type=range] {
-webkit-appearance: none;
width: 142px;
padding: 6px 3px;
cursor: pointer;
position: absolute;
top: 21px;
left: 68px;
background-color: #5E82A8;
}

input[type=range]:focus {
outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
cursor: pointer;
background: #567698;
border-radius: 3px;
border: 1px solid #32557c;
}

input[type=range]::-webkit-slider-thumb {
border: 1px solid #32557c;
height: 12px;
width: 12px;
border-radius: 6px;
background: #b4c8de;
cursor: pointer;
-webkit-appearance: none;
margin-top: -4px;
}
</style>
</head>

<body>
<div class="controls">
<div id="cnt_play"></div>
<input id="cnt_volume" type="range" min="0" max="100" step="1">
</div>

<ul id="play_list"></ul>

<div class="bottom"></div>

<script type="text/javascript" src="./stations.js"></script>
<script type="text/javascript" src="./application.js"></script>
</body>
</html>
<head>
<meta charset="utf-8">
<style type="text/css" rel="stylesheet">
* {
margin: 0;
padding: 0;
}

body {
width: 234px;
background-color: #fcfcfc;
}

.controls {
height: 57px;
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-color: #5E82A8;

border-bottom: 5px solid #fcfcfc;
}

#cnt_play {
width: 32px;
height: 32px;
cursor: pointer;
position: absolute;
top: 13px;
left: 19px;
background-image: url('img/buttons.png');
background-repeat: no-repeat;
}

.stopped {
background-position: 0 0;
}

.stopped:hover {
background-position: -32px 0;
}

.stopped:active {
background-position: -64px 0;
}

.played {
background-position: 0 -32px;
}

.played:hover {
background-position: -32px -32px;
}

.played:active {
background-position: -64px -32px;
}

#play_list {
width: 234px;
height: 203px;
overflow: hidden;
overflow-y: auto;
list-style: none;
}

#play_list li {
height: 24px;
display: flex;
padding-left: 24px;
cursor: pointer;
font-family: verdana, tahoma, arial, sans-serif;
font-size: 12px;
line-height: 24px;
color: #212121;
}

#play_list li .group {
width: 24px;
font-size: 9px;
color: #888;
font-weight: 100;
}

#play_list li .name {
flex: 1;
}

#play_list li:hover {
background: #e2e5e9;
}

#play_list li.selected {
background: #5E82A8;
}

#play_list li.selected .group {
color: #ccc;
}

#play_list li.selected .name {
color: #f1f1f1;
}

.bottom {
height: 16px;
padding: 2px 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
text-align: center;
background-color: #5E82A8;

border-top: 5px solid #fcfcfc;
}
</style>

<style type="text/css" rel="stylesheet">
input[type=range] {
-webkit-appearance: none;
width: 142px;
padding: 6px 3px;
cursor: pointer;
position: absolute;
top: 21px;
left: 68px;
background-color: #5E82A8;
}

input[type=range]:focus {
outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
cursor: pointer;
background: #567698;
border-radius: 3px;
border: 1px solid #32557c;
}

input[type=range]::-webkit-slider-thumb {
border: 1px solid #32557c;
height: 12px;
width: 12px;
border-radius: 6px;
background: #b4c8de;
cursor: pointer;
-webkit-appearance: none;
margin-top: -4px;
}
</style>
</head>

<body>
<div class="controls">
<div id="cnt_play"></div>
<input id="cnt_volume" type="range" min="0" max="100" step="1">
</div>

<ul id="play_list"></ul>

<div class="bottom"></div>

<script type="text/javascript" src="./stations.js"></script>
<script type="text/javascript" src="./application.js"></script>
</body>
</html>

0 comments on commit 4bea1a0

Please sign in to comment.