diff --git a/cps/static/css/images/black-10.png b/cps/static/css/images/black-10.png new file mode 100644 index 00000000..fe545ed8 Binary files /dev/null and b/cps/static/css/images/black-10.png differ diff --git a/cps/static/css/images/black-25.png b/cps/static/css/images/black-25.png new file mode 100644 index 00000000..a498b981 Binary files /dev/null and b/cps/static/css/images/black-25.png differ diff --git a/cps/static/css/images/black-33.png b/cps/static/css/images/black-33.png new file mode 100644 index 00000000..cfb1cb6b Binary files /dev/null and b/cps/static/css/images/black-33.png differ diff --git a/cps/static/css/images/icomoon/credits.txt b/cps/static/css/images/icomoon/credits.txt new file mode 100644 index 00000000..34c4b3ab --- /dev/null +++ b/cps/static/css/images/icomoon/credits.txt @@ -0,0 +1,6 @@ +SVG icons via Icomoon +https://icomoon.io/app + +Icons used from the following sets: +* Entypo - Creative Commons BY-SA 3.0 http://creativecommons.org/licenses/by-sa/3.0/us/ +* IcoMoon - Free (GPL) http://www.gnu.org/licenses/gpl.html \ No newline at end of file diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/PNG/arrow.png b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/arrow.png new file mode 100644 index 00000000..e77449bc Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/arrow.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/PNG/cart.png b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/cart.png new file mode 100644 index 00000000..70e74a14 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/cart.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/PNG/first.png b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/first.png new file mode 100644 index 00000000..0947734a Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/first.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/PNG/last.png b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/last.png new file mode 100644 index 00000000..3621d331 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/last.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/PNG/list.png b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/list.png new file mode 100644 index 00000000..2684aaf3 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/list.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/PNG/list2.png b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/list2.png new file mode 100644 index 00000000..601413b7 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/list2.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/PNG/loop.png b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/loop.png new file mode 100644 index 00000000..6f9aba04 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/loop.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/PNG/music.png b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/music.png new file mode 100644 index 00000000..6e1ae083 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/music.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/PNG/pause.png b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/pause.png new file mode 100644 index 00000000..e9fe4b9e Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/pause.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/PNG/play.png b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/play.png new file mode 100644 index 00000000..6fcf7770 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/play.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/PNG/shuffle.png b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/shuffle.png new file mode 100644 index 00000000..7eb8f6cb Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/shuffle.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/PNG/volume.png b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/volume.png new file mode 100644 index 00000000..e5c077f5 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-000000/PNG/volume.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/SVG/arrow.svg b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/arrow.svg new file mode 100644 index 00000000..e6f2a0bd --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/arrow.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/SVG/cart.svg b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/cart.svg new file mode 100644 index 00000000..590ffa8c --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/cart.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/SVG/first.svg b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/first.svg new file mode 100644 index 00000000..e69482d1 --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/first.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/SVG/last.svg b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/last.svg new file mode 100644 index 00000000..9a958b23 --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/last.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/SVG/list.svg b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/list.svg new file mode 100644 index 00000000..88c39810 --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/list.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/SVG/list2.svg b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/list2.svg new file mode 100644 index 00000000..0c9ea62f --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/list2.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/SVG/loop.svg b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/loop.svg new file mode 100644 index 00000000..7b0c90ce --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/loop.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/SVG/music.svg b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/music.svg new file mode 100644 index 00000000..135ccded --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/music.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/SVG/pause.svg b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/pause.svg new file mode 100644 index 00000000..d08ab5ad --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/pause.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/SVG/play.svg b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/play.svg new file mode 100644 index 00000000..352ccad2 --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/play.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/SVG/shuffle.svg b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/shuffle.svg new file mode 100644 index 00000000..a6fc25f4 --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/shuffle.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-000000/SVG/volume.svg b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/volume.svg new file mode 100644 index 00000000..dcc4a3c2 --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-000000/SVG/volume.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/arrow.png b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/arrow.png new file mode 100644 index 00000000..2452d288 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/arrow.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/cart.png b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/cart.png new file mode 100644 index 00000000..611a3966 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/cart.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/first.png b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/first.png new file mode 100644 index 00000000..09de90ac Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/first.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/last.png b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/last.png new file mode 100644 index 00000000..e0dd9323 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/last.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/list.png b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/list.png new file mode 100644 index 00000000..79b32069 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/list.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/list2.png b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/list2.png new file mode 100644 index 00000000..a8892c26 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/list2.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/loop.png b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/loop.png new file mode 100644 index 00000000..60b071a6 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/loop.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/music.png b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/music.png new file mode 100644 index 00000000..c1a64a6c Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/music.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/pause.png b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/pause.png new file mode 100644 index 00000000..70b4f860 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/pause.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/play.png b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/play.png new file mode 100644 index 00000000..3c720426 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/play.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/shuffle.png b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/shuffle.png new file mode 100644 index 00000000..60f58686 Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/shuffle.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/volume.png b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/volume.png new file mode 100644 index 00000000..7c251ddd Binary files /dev/null and b/cps/static/css/images/icomoon/entypo-25px-ffffff/PNG/volume.png differ diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/arrow.svg b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/arrow.svg new file mode 100644 index 00000000..ea2a59ae --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/arrow.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/cart.svg b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/cart.svg new file mode 100644 index 00000000..4b08a94b --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/cart.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/first.svg b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/first.svg new file mode 100644 index 00000000..ac3cf397 --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/first.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/last.svg b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/last.svg new file mode 100644 index 00000000..4e3b833d --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/last.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/list.svg b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/list.svg new file mode 100644 index 00000000..fa2f7174 --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/list.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/list2.svg b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/list2.svg new file mode 100644 index 00000000..7cec36cb --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/list2.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/loop.svg b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/loop.svg new file mode 100644 index 00000000..79c89573 --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/loop.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/music.svg b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/music.svg new file mode 100644 index 00000000..9a6fd461 --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/music.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/pause.svg b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/pause.svg new file mode 100644 index 00000000..77ca91bb --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/pause.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/play.svg b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/play.svg new file mode 100644 index 00000000..b98385f7 --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/play.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/shuffle.svg b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/shuffle.svg new file mode 100644 index 00000000..13a4007d --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/shuffle.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/volume.svg b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/volume.svg new file mode 100644 index 00000000..9d708435 --- /dev/null +++ b/cps/static/css/images/icomoon/entypo-25px-ffffff/SVG/volume.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/free-25px-000000/PNG/spinner.png b/cps/static/css/images/icomoon/free-25px-000000/PNG/spinner.png new file mode 100644 index 00000000..bd6d1a4c Binary files /dev/null and b/cps/static/css/images/icomoon/free-25px-000000/PNG/spinner.png differ diff --git a/cps/static/css/images/icomoon/free-25px-000000/SVG/spinner.svg b/cps/static/css/images/icomoon/free-25px-000000/SVG/spinner.svg new file mode 100644 index 00000000..1fa2d52b --- /dev/null +++ b/cps/static/css/images/icomoon/free-25px-000000/SVG/spinner.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/icomoon/free-25px-ffffff/PNG/spinner.png b/cps/static/css/images/icomoon/free-25px-ffffff/PNG/spinner.png new file mode 100644 index 00000000..7db55258 Binary files /dev/null and b/cps/static/css/images/icomoon/free-25px-ffffff/PNG/spinner.png differ diff --git a/cps/static/css/images/icomoon/free-25px-ffffff/SVG/spinner.svg b/cps/static/css/images/icomoon/free-25px-ffffff/SVG/spinner.svg new file mode 100644 index 00000000..eac5df26 --- /dev/null +++ b/cps/static/css/images/icomoon/free-25px-ffffff/SVG/spinner.svg @@ -0,0 +1,8 @@ + + + + diff --git a/cps/static/css/images/patterns/credits.txt b/cps/static/css/images/patterns/credits.txt new file mode 100644 index 00000000..fb3d6673 --- /dev/null +++ b/cps/static/css/images/patterns/credits.txt @@ -0,0 +1,2 @@ +Patterns from subtlepatterns.com. +"If you need more, that's where to get 'em." \ No newline at end of file diff --git a/cps/static/css/images/patterns/pinstriped_suit_vertical.png b/cps/static/css/images/patterns/pinstriped_suit_vertical.png new file mode 100644 index 00000000..26d547a6 Binary files /dev/null and b/cps/static/css/images/patterns/pinstriped_suit_vertical.png differ diff --git a/cps/static/css/images/patterns/pool_table.png b/cps/static/css/images/patterns/pool_table.png new file mode 100644 index 00000000..4183efa5 Binary files /dev/null and b/cps/static/css/images/patterns/pool_table.png differ diff --git a/cps/static/css/images/patterns/rubber_grip.png b/cps/static/css/images/patterns/rubber_grip.png new file mode 100644 index 00000000..076b9606 Binary files /dev/null and b/cps/static/css/images/patterns/rubber_grip.png differ diff --git a/cps/static/css/images/patterns/tasky_pattern.png b/cps/static/css/images/patterns/tasky_pattern.png new file mode 100644 index 00000000..81d218bc Binary files /dev/null and b/cps/static/css/images/patterns/tasky_pattern.png differ diff --git a/cps/static/css/images/patterns/textured_paper.png b/cps/static/css/images/patterns/textured_paper.png new file mode 100644 index 00000000..856ad372 Binary files /dev/null and b/cps/static/css/images/patterns/textured_paper.png differ diff --git a/cps/static/css/images/patterns/tweed.png b/cps/static/css/images/patterns/tweed.png new file mode 100644 index 00000000..03fb7968 Binary files /dev/null and b/cps/static/css/images/patterns/tweed.png differ diff --git a/cps/static/css/images/patterns/wood_pattern.png b/cps/static/css/images/patterns/wood_pattern.png new file mode 100644 index 00000000..47903e43 Binary files /dev/null and b/cps/static/css/images/patterns/wood_pattern.png differ diff --git a/cps/static/css/images/patterns/wood_pattern_dark.png b/cps/static/css/images/patterns/wood_pattern_dark.png new file mode 100644 index 00000000..1f5fc7fe Binary files /dev/null and b/cps/static/css/images/patterns/wood_pattern_dark.png differ diff --git a/cps/static/css/images/patterns/woven.png b/cps/static/css/images/patterns/woven.png new file mode 100644 index 00000000..ab692435 Binary files /dev/null and b/cps/static/css/images/patterns/woven.png differ diff --git a/cps/static/css/libs/bar-ui.css b/cps/static/css/libs/bar-ui.css new file mode 100644 index 00000000..34e39649 --- /dev/null +++ b/cps/static/css/libs/bar-ui.css @@ -0,0 +1,1001 @@ +/** + * SoundManager 2: "Bar UI" player - CSS + * Copyright (c) 2014, Scott Schiller. All rights reserved. + * http://www.schillmania.com/projects/soundmanager2/ + * Code provided under BSD license. + * http://schillmania.com/projects/soundmanager2/license.txt + */ + +.sm2-bar-ui { + position: relative; + display: inline-block; + width: 100%; + font-family: helvetica, arial, verdana, sans-serif; + font-weight: normal; + /* prevent background border bleed */ + -webkit-background-clip: padding-box; + background-clip: padding-box; + /* because indeed, fonts do look pretty "fat" otherwise in this case. */ + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + /* general font niceness? */ + font-smoothing: antialiased; + text-rendering: optimizeLegibility; + min-width: 20em; + max-width: 30em; + /* take out overflow if you want an absolutely-positioned playlist dropdown. */ + border-radius: 2px; + overflow: hidden; + /* just for fun (animate normal / full-width) */ + transition: max-width 0.2s ease-in-out; +} + +.sm2-bar-ui .sm2-playlist li { + text-align: center; + margin-top: -2px; + font-size: 95%; + line-height: 1em; +} + +.sm2-bar-ui.compact { + min-width: 1em; + max-width: 15em; +} + +.sm2-bar-ui ul { + line-height: 1em; +} + +/* want things left-aligned? */ +.sm2-bar-ui.left .sm2-playlist li { + text-align: left; +} + +.sm2-bar-ui .sm2-playlist li .load-error { + cursor: help; +} + +.sm2-bar-ui.full-width { + max-width: 100%; + z-index: 5; +} + +.sm2-bar-ui.fixed { + position: fixed; + top: auto; + bottom: 0px; + left: 0px; + border-radius: 0px; + /* so the absolutely-positioned playlist can show... */ + overflow: visible; + /* and this should probably have a high z-index. tweak as needed. */ + z-index: 999; +} + +.sm2-bar-ui.fixed .bd, +.sm2-bar-ui.bottom .bd { + /* display: table; */ + border-radius: 0px; + border-bottom: none; +} + +.sm2-bar-ui.bottom { + /* absolute bottom-aligned UI */ + top: auto; + bottom: 0px; + left: 0px; + border-radius: 0px; + /* so the absolutely-positioned playlist can show... */ + overflow: visible; +} + +.sm2-bar-ui.playlist-open .bd { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + border-bottom-color: transparent; +} + +.sm2-bar-ui .bd, +.sm2-bar-ui .sm2-extra-controls { + position: relative; + background-color: #2288cc; + /* + transition: background 0.2s ease-in-out; + */ +} + +.sm2-bar-ui .sm2-inline-gradient { + /* gradient */ + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, rgba(255,255,255,0.125) 5%, rgba(255,255,255,0.125) 45%, rgba(255,255,255,0.15) 50%, rgba(0,0,0,0.1) 51%, rgba(0,0,0,0.1) 95%); /* W3C */ +} + +.sm2-bar-ui.flat .sm2-inline-gradient { + background-image: none; +} + +.sm2-bar-ui.flat .sm2-box-shadow { + display: none; + box-shadow: none; +} + +.sm2-bar-ui.no-volume .sm2-volume { + /* mobile devices (android + iOS) ignore attempts to set volume. */ + display: none; +} + +.sm2-bar-ui.textured .sm2-inline-texture { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + /* for example */ + /* background-image: url(../images/wood_pattern_dark.png); */ + /* additional opacity effects can be applied here. */ + opacity: 0.75; + +} + +.sm2-bar-ui.textured.dark-text .sm2-inline-texture { + /* dark text + textured case: use light wood background (for example.) */ + /* background-image: url(../images/patterns/wood_pattern.png); */ +} + +.sm2-bar-ui.textured.dark-text .sm2-playlist-wrapper { + /* dark text + textured case: ditch 10% dark on playlist body. */ + background-color: transparent; +} + +.sm2-bar-ui.textured.dark-text .sm2-playlist-wrapper ul li:hover a, +.sm2-bar-ui.textured.dark-text .sm2-playlist-wrapper ul li.selected a { + /* dark + textured case: dark highlights */ + background-color: rgba(0,0,0,0.1); + background-image: url(../images/black-10.png); + /* modern browsers don't neeed the image */ + background-image: none, none; +} + +.sm2-bar-ui .bd { + display: table; + border-bottom: none; +} + +.sm2-bar-ui .sm2-playlist-wrapper { + background-color: rgba(0,0,0,0.1); +} + +.sm2-bar-ui .sm2-extra-controls .bd { + background-color: rgba(0,0,0,0.2); +} + + +.sm2-bar-ui.textured .sm2-extra-controls .bd { + /* lighten extra color overlays */ + background-color: rgba(0,0,0,0.05); +} + +.sm2-bar-ui .sm2-extra-controls { + background-color: transparent; + border: none; +} + +.sm2-bar-ui .sm2-extra-controls .bd { + /* override full-width table behaviour */ + display: block; + border: none; +} + +.sm2-bar-ui .sm2-extra-controls .sm2-inline-element { + display: inline-block; +} + +.sm2-bar-ui, +.sm2-bar-ui .bd a { + color: #fff; +} + +.sm2-bar-ui.dark-text, +.sm2-bar-ui.dark-text .bd a { + color: #000; +} + +.sm2-bar-ui.dark-text .sm2-inline-button { + /* Warning/disclaimer: SVG might be fuzzy when inverted on Chrome, losing resolution on hi-DPI displays. */ + -webkit-filter: invert(1); + /* SVG-based invert filter for Firefox */ + filter: url("data:image/svg+xml;utf8,#invert"); + /* IE 8 inverse filter, may only match pure black/white */ + /* filter: xray; */ + /* pending W3 standard */ + filter: invert(1); + /* not you, IE < 10. */ + filter: none\9; +} + +.sm2-bar-ui .bd a { + text-decoration: none; +} + +.sm2-bar-ui .bd .sm2-button-element:hover { + background-color: rgba(0,0,0,0.1); + background-image: url(../images/black-10.png); + background-image: none, none; +} + +.sm2-bar-ui .bd .sm2-button-element:active { + background-color: rgba(0,0,0,0.25); + background-image: url(../images/black-25.png); + background-image: none, none; +} + +.sm2-bar-ui .bd .sm2-extra-controls .sm2-button-element:active .sm2-inline-button, +.sm2-bar-ui .bd .active .sm2-inline-button/*, +.sm2-bar-ui.playlist-open .sm2-menu a */{ + -ms-transform: scale(0.9); + -webkit-transform: scale(0.9); + -webkit-transform-origin: 50% 50%; + /* firefox doesn't scale quite right. */ + transform: scale(0.9); + transform-origin: 50% 50%; + /* firefox doesn't scale quite right. */ + -moz-transform: none; +} + +.sm2-bar-ui .bd .sm2-extra-controls .sm2-button-element:hover, +.sm2-bar-ui .bd .sm2-extra-controls .sm2-button-element:active, +.sm2-bar-ui .bd .active { + background-color: rgba(0,0,0,0.1); + background-image: url(../images/black-10.png); + background-image: none, none; +} + +.sm2-bar-ui .bd .sm2-extra-controls .sm2-button-element:active { + /* box shadow is excessive on smaller elements. */ + box-shadow: none; +} + +.sm2-bar-ui { + /* base font size */ + font-size: 15px; + text-shadow: none; +} + +.sm2-bar-ui .sm2-inline-element { + position: relative; + display: inline-block; + vertical-align: middle; + padding: 0px; + overflow: hidden; +} + +.sm2-bar-ui .sm2-inline-element, +.sm2-bar-ui .sm2-button-element .sm2-button-bd { + position: relative; + /** + * .sm2-button-bd exists because of a Firefox bug from 2000 + * re: nested relative / absolute elements inside table cells. + * https://bugzilla.mozilla.org/show_bug.cgi?id=63895 + */ +} + +.sm2-bar-ui .sm2-inline-element, +.sm2-bar-ui .sm2-button-element .sm2-button-bd { + /** + * if you play with UI width/height, these are the important ones. + * NOTE: match these values if you want square UI buttons. + */ + min-width: 2.8em; + min-height: 2.8em; +} + +.sm2-bar-ui .sm2-inline-button { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; +} + +.sm2-bar-ui .sm2-extra-controls .bd { + /* don't double-layer. */ + background-image: none; + background-color: rgba(0,0,0,0.15); +} + +.sm2-bar-ui .sm2-extra-controls .sm2-inline-element { + width: 25px; /* bare minimum */ + min-height: 1.75em; + min-width: 2.5em; +} + +.sm2-bar-ui .sm2-inline-status { + line-height: 100%; + /* how much to allow before truncating song artist / title with ellipsis */ + display: inline-block; + min-width: 200px; + max-width: 20em; + /* a little more spacing */ + padding-left: 0.75em; + padding-right: 0.75em; +} + +.sm2-bar-ui .sm2-inline-element { + /* extra-small em scales up nicely, vs. 1px which gets fat */ + border-right: 0.075em dotted #666; /* legacy */ + border-right: 0.075em solid rgba(0,0,0,0.1); +} + +.sm2-bar-ui .sm2-inline-element.noborder { + border-right: none; +} + +.sm2-bar-ui .sm2-inline-element.compact { + min-width: 2em; + padding: 0px 0.25em; +} + +.sm2-bar-ui .sm2-inline-element:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + overflow: hidden; +} + +.sm2-bar-ui .sm2-inline-element:last-of-type { + border-right: none; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} + +.sm2-bar-ui .sm2-inline-status a:hover { + background-color: transparent; + text-decoration: underline; +} + +.sm2-inline-time, +.sm2-inline-duration { + display: table-cell; + width: 1%; + font-size: 75%; + line-height: 0.9em; + min-width: 2em; /* if you have sounds > 10:00 in length, make this bigger. */ + vertical-align: middle; +} + +.sm2-bar-ui .sm2-playlist { + position: relative; + height: 1.45em; +} + +.sm2-bar-ui .sm2-playlist-target { + /* initial render / empty case */ + position: relative; + min-height: 1em; +} + +.sm2-bar-ui .sm2-playlist ul { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + list-style-type: none; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.sm2-bar-ui p, +.sm2-bar-ui .sm2-playlist ul, +.sm2-bar-ui .sm2-playlist ul li { + margin: 0px; + padding: 0px; +} + +.sm2-bar-ui .sm2-playlist ul li { + position: relative; +} + +.sm2-bar-ui .sm2-playlist ul li, +.sm2-bar-ui .sm2-playlist ul li a { + position: relative; + display: block; + /* prevent clipping of characters like "g" */ + height: 1.5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: center; +} + +.sm2-row { + position: relative; + display: table-row; +} + +.sm2-progress-bd { + /* spacing between progress track/ball and time (position) */ + padding: 0px 0.8em; +} + +.sm2-progress .sm2-progress-track, +.sm2-progress .sm2-progress-ball, +.sm2-progress .sm2-progress-bar { + position: relative; + width: 100%; + height: 0.65em; + border-radius: 0.65em; +} + +.sm2-progress .sm2-progress-bar { + /* element which follows the progres "ball" as it moves */ + position: absolute; + left: 0px; + top: 0px; + width: 0px; + background-color: rgba(0,0,0,0.33); + background-image: url(../images/black-33.png); + background-image: none, none; +} + +.volume-shade, +.playing .sm2-progress .sm2-progress-track, +.paused .sm2-progress .sm2-progress-track { + cursor: pointer; +} + +.playing .sm2-progress .sm2-progress-ball { + cursor: -moz-grab; + cursor: -webkit-grab; + cursor: grab; +} + +.sm2-progress .sm2-progress-ball { + position: absolute; + top: 0px; + left: 0px; + width: 1em; + height: 1em; + margin: -0.2em 0px 0px -0.5em; + width: 14px; + height: 14px; + margin: -2px 0px 0px -7px; + width: 0.9333em; + height: 0.9333em; + margin: -0.175em 0px 0px -0.466em; + background-color: #fff; + padding: 0px; +/* + z-index: 1; +*/ + transition: transform 0.15s ease-in-out; +} + +/* +.sm2-bar-ui.dark-text .sm2-progress .sm2-progress-ball { + background-color: #000; +} +*/ + +.sm2-progress .sm2-progress-track { + background-color: rgba(0,0,0,0.4); + background-image: url(../images/black-33.png); /* legacy */ + background-image: none, none; /* modern browsers */ +} + +/* scrollbar rules have to be separate, browsers not supporting this syntax will skip them when combined. */ +.sm2-playlist-wrapper ul::-webkit-scrollbar-track { + background-color: rgba(0,0,0,0.4); +} + +.playing.grabbing .sm2-progress .sm2-progress-track, +.playing.grabbing .sm2-progress .sm2-progress-ball { + cursor: -moz-grabbing; + cursor: -webkit-grabbing; + cursor: grabbing; +} + +.sm2-bar-ui.grabbing .sm2-progress .sm2-progress-ball { + -webkit-transform: scale(1.15); + transform: scale(1.15); +} + +.sm2-inline-button { + background-position: 50% 50%; + background-repeat: no-repeat; + /* hide inner text */ + line-height: 10em; + /** + * image-rendering seems to apply mostly to Firefox in this case. Use with caution. + * https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering#Browser_compatibility + */ + image-rendering: -moz-crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; + -ms-interpolation-mode: nearest-neighbor; + -ms-interpolation-mode: bicubic; +} + +.sm2-icon-play-pause, +.sm2-icon-play-pause:hover, +.paused .sm2-icon-play-pause:hover { + background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/play.png); + background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/play.svg); + background-size: 67.5%; + background-position: 40% 53%; +} + +.playing .sm2-icon-play-pause { + background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/pause.png); + background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/pause.svg); + background-size: 57.6%; + background-position: 50% 53%; +} + +.sm2-volume-control { + background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/volume.png); + background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/volume.svg); +} + +.sm2-volume-control, +.sm2-volume-shade { + background-position: 42% 50%; + background-size: 56%; +} + +.volume-shade { + filter: alpha(opacity=33); /* <= IE 8 */ + opacity: 0.33; +/* -webkit-filter: invert(1);*/ + background-image: url(../images/icomoon/entypo-25px-000000/PNG/volume.png); + background-image: none, url(../images/icomoon/entypo-25px-000000/SVG/volume.svg); +} + +.sm2-icon-menu { + background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/list2.png); + background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/list2.svg); + background-size: 58%; + background-position: 54% 51%; +} + +.sm2-icon-previous { + background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/first.png); + background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/first.svg); +} + +.sm2-icon-next { + background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/last.png); + background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/last.svg); +} + +.sm2-icon-previous, +.sm2-icon-next { + background-size: 49.5%; + background-position: 50% 50%; +} + + +.sm2-extra-controls .sm2-icon-previous, +.sm2-extra-controls .sm2-icon-next { + backgound-size: 53%; +} + +.sm2-icon-shuffle { + background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/shuffle.png); + background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/shuffle.svg); + background-size: 45%; + background-position: 50% 50%; +} + +.sm2-icon-repeat { + background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/loop.png); + background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/loop.svg); + background-position: 50% 43%; + background-size: 54%; +} + +.sm2-extra-controls .sm2-icon-repeat { + background-position: 50% 45%; +} + +.sm2-playlist-wrapper ul li .sm2-row { + display: table; + width: 100%; +} + +.sm2-playlist-wrapper ul li .sm2-col { + display: table-cell; + vertical-align: top; + /* by default, collapse. */ + width: 0%; +} + +.sm2-playlist-wrapper ul li .sm2-col.sm2-wide { + /* take 100% width. */ + width: 100%; +} + +.sm2-playlist-wrapper ul li .sm2-icon { + display: inline-block; + overflow: hidden; + width: 2em; + color: transparent !important; /* hide text */ + white-space: nowrap; /* don't let text affect height */ + padding-left: 0px; + padding-right: 0px; + text-indent: 2em; /* IE 8, mostly */ +} + +.sm2-playlist-wrapper ul li .sm2-icon, +.sm2-playlist-wrapper ul li:hover .sm2-icon, +.sm2-playlist-wrapper ul li.selected .sm2-icon { + background-size: 55%; + background-position: 50% 50%; + background-repeat: no-repeat; +} + +.sm2-playlist-wrapper ul li .sm2-col { + /* sibling table cells get borders. */ + border-right: 1px solid rgba(0,0,0,0.075); +} + +.sm2-playlist-wrapper ul li.selected .sm2-col { + border-color: rgba(255,255,255,0.075); +} + +.sm2-playlist-wrapper ul li .sm2-col:last-of-type { + border-right: none; +} + +.sm2-playlist-wrapper ul li .sm2-cart, +.sm2-playlist-wrapper ul li:hover .sm2-cart, +.sm2-playlist-wrapper ul li.selected .sm2-cart { + background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/cart.png); + background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/cart.svg); + /* slight alignment tweak */ + background-position: 48% 50%; +} + +.sm2-playlist-wrapper ul li .sm2-music, +.sm2-playlist-wrapper ul li:hover .sm2-music, +.sm2-playlist-wrapper ul li.selected .sm2-music { + background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/music.png); + background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/music.svg); +} + +.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li .sm2-cart, +.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li:hover .sm2-cart, +.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li.selected .sm2-cart { + background-image: url(../images/icomoon/entypo-25px-000000/PNG/cart.png); + background-image: none, url(../images/icomoon/entypo-25px-000000/SVG/cart.svg); +} + +.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li .sm2-music, +.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li:hover .sm2-music, +.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li.selected .sm2-music { + background-image: url(../images/icomoon/entypo-25px-000000/PNG/music.png); + background-image: none, url(../images/icomoon/entypo-25px-000000/SVG/music.svg); +} + + +.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li .sm2-col { + border-left-color: rgba(0,0,0,0.15); +} + +.sm2-playlist-wrapper ul li .sm2-icon:hover { + background-color: rgba(0,0,0,0.33); +} + +.sm2-bar-ui .sm2-playlist-wrapper ul li .sm2-icon:hover { + background-color: rgba(0,0,0,0.45); +} + +.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li.selected .sm2-icon:hover { + background-color: rgba(255,255,255,0.25); + border-color: rgba(0,0,0,0.125); +} + +.sm2-progress-ball .icon-overlay { + position: absolute; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + background: none, url(../images/icomoon/free-25px-000000/SVG/spinner.svg); + background-size: 72%; + background-position: 50%; + background-repeat: no-repeat; + display: none; +} + +.playing.buffering .sm2-progress-ball .icon-overlay { + display: block; + -webkit-animation: spin 0.6s linear infinite; + animation: spin 0.6s linear infinite; +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + } +} + +@-moz-keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.sm2-element ul { + font-size: 95%; + list-style-type: none; +} + +.sm2-element ul, +.sm2-element ul li { + margin: 0px; + padding: 0px; +} + +.bd.sm2-playlist-drawer { + /* optional: absolute positioning */ + /* position: absolute; */ + z-index: 3; + border-radius: 0px; + width: 100%; + height: 0px; + border: none; + background-image: none; + display: block; + overflow: hidden; + transition: height 0.2s ease-in-out; +} + +.sm2-bar-ui.fixed .bd.sm2-playlist-drawer, +.sm2-bar-ui.bottom .bd.sm2-playlist-drawer { + position: absolute; +} + +.sm2-bar-ui.fixed .sm2-playlist-wrapper, +.sm2-bar-ui.bottom .sm2-playlist-wrapper { + padding-bottom: 0px; +} + +.sm2-bar-ui.fixed .bd.sm2-playlist-drawer, +.sm2-bar-ui.bottom .bd.sm2-playlist-drawer { + /* show playlist on top */ + bottom: 2.8em; +} + +.sm2-bar-ui .bd.sm2-playlist-drawer { + opacity: 0.5; + /* redraw fix for Chrome, background color doesn't always draw when playlist drawer open. */ + transform: translateZ(0); +} + +/* experimental, may not perform well. */ +/* +.sm2-bar-ui .bd.sm2-playlist-drawer a { + -webkit-filter: blur(5px); +} +*/ + +.sm2-bar-ui.playlist-open .bd.sm2-playlist-drawer { + height: auto; + opacity: 1; +} + +.sm2-bar-ui.playlist-open .bd.sm2-playlist-drawer a { + -webkit-filter: none; /* blur(0px) was still blurred on retina displays, as of 07/2014 */ +} + +.sm2-bar-ui.fixed.playlist-open .bd.sm2-playlist-drawer .sm2-playlist-wrapper, +.sm2-bar-ui.bottom.playlist-open .bd.sm2-playlist-drawer .sm2-playlist-wrapper { + /* extra padding when open */ + padding-bottom: 0.5em; + box-shadow: none; +} + +.sm2-bar-ui .bd.sm2-playlist-drawer { + transition: all 0.2s ease-in-out; + transition-property: transform, height, opacity, background-color, -webkit-filter; +} + +.sm2-bar-ui .bd.sm2-playlist-drawer a { + transition: -webkit-filter 0.2s ease-in-out; +} + +.sm2-bar-ui .bd.sm2-playlist-drawer .sm2-inline-texture { + /* negative offset for height of top bar, so background is seamless. */ + background-position: 0px -2.8em; +} + +.sm2-box-shadow { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + box-shadow: inset 0px 1px 6px rgba(0,0,0,0.15); +} + +.sm2-playlist-wrapper { + position: relative; + padding: 0.5em 0.5em 0.5em 0.25em; + background-image: none, none; +} + +.sm2-playlist-wrapper ul { + max-height: 9.25em; + overflow: auto; +} + +.sm2-playlist-wrapper ul li { + border-bottom: 1px solid rgba(0,0,0,0.05); +} + +.sm2-playlist-wrapper ul li:nth-child(odd) { + background-color: rgba(255,255,255,0.03); +} + +.sm2-playlist-wrapper ul li a { + display: block; + padding: 0.5em 0.25em 0.5em 0.75em; + margin-right: 0px; + font-size: 90%; + vertical-align: middle; +} + +.sm2-playlist-wrapper ul li a.sm2-exclude { + display: inline-block; +} + +.sm2-playlist-wrapper ul li a.sm2-exclude .label { + font-size: 95%; + line-height: 1em; + margin-left: 0px; + padding: 2px 4px; +} + +.sm2-playlist-wrapper ul li:hover a { + background-color: rgba(0,0,0,0.20); + background-image: url(../images/black-20.png); + background-image: none, none; +} + +.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li:hover a { + background-color: rgba(255,255,255,0.1); + background-image: url(../images/black-10.png); + background-image: none, none; +} + +.sm2-playlist-wrapper ul li.selected a { + background-color: rgba(0,0,0,0.25); + background-image: url(../images/black-20.png); + background-image: none, none; +} + +.sm2-bar-ui.dark-text ul li.selected a { + background-color: rgba(255,255,255,0.1); + background-image: url(../images/black-10.png); + background-image: none, none; +} + +.sm2-bar-ui .disabled { + filter: alpha(opacity=33); /* <= IE 8 */ + opacity: 0.33; +} + +.sm2-bar-ui .bd .sm2-button-element.disabled:hover { + background-color: transparent; +} + +.sm2-bar-ui .active, +/*.sm2-bar-ui.playlist-open .sm2-menu,*/ +.sm2-bar-ui.playlist-open .sm2-menu:hover { + /* depressed / "on" state */ + box-shadow: inset 0px 0px 2px rgba(0,0,0,0.1); + background-image: none; +} + +.firefox-fix { + /** + * This exists because of a Firefox bug from 2000 + * re: nested relative / absolute elements inside table cells. + * https://bugzilla.mozilla.org/show_bug.cgi?id=63895 + */ + position: relative; + display: inline-block; + width: 100%; + height: 100%; +} + +/* some custom scrollbar trickery, where supported */ + +.sm2-playlist-wrapper ul::-webkit-scrollbar { + width: 10px; +} + +.sm2-playlist-wrapper ul::-webkit-scrollbar-track { + background: rgba(0,0,0,0.33); + border-radius: 10px; +} + +.sm2-playlist-wrapper ul::-webkit-scrollbar-thumb { + border-radius: 10px; + background: #fff; +} + +.sm2-extra-controls { + font-size: 0px; + text-align: center; +} + +.sm2-bar-ui .label { + position: relative; + display: inline-block; + font-size: 0.7em; + margin-left: 0.25em; + vertical-align: top; + background-color: rgba(0,0,0,0.25); + border-radius: 3px; + padding: 0px 3px; + box-sizing: padding-box; +} + +.sm2-bar-ui.dark-text .label { + background-color: rgba(0,0,0,0.1); + background-image: url(../images/black-10.png); + background-image: none, none; +} + +.sm2-bar-ui .sm2-playlist-drawer .label { + font-size: 0.8em; + padding: 0px 3px; +} + +/* --- full width stuff --- */ + +.sm2-bar-ui .sm2-inline-element { + display: table-cell; +} + +.sm2-bar-ui .sm2-inline-element { + /* collapse */ + width: 1%; +} + +.sm2-bar-ui .sm2-inline-status { + /* full width */ + width: 100%; + min-width: 100%; + max-width: 100%; +} + +.sm2-bar-ui > .bd { + width: 100%; +} + +.sm2-bar-ui .sm2-playlist-drawer { + /* re-hide playlist */ + display: block; + overflow: hidden; +} diff --git a/cps/static/css/listen.css b/cps/static/css/listen.css new file mode 100644 index 00000000..b08cc33c --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/cps/static/js/libs/bar-ui.js b/cps/static/js/libs/bar-ui.js new file mode 100644 index 00000000..e0d4b85c --- /dev/null +++ b/cps/static/js/libs/bar-ui.js @@ -0,0 +1,1745 @@ +(function (window) { + + /** + * SoundManager 2: "Bar UI" player + * Copyright (c) 2014, Scott Schiller. All rights reserved. + * http://www.schillmania.com/projects/soundmanager2/ + * Code provided under BSD license. + * http://schillmania.com/projects/soundmanager2/license.txt + */ + + /* global console, document, navigator, soundManager, window */ + + 'use strict'; + + var Player, + players = [], + // CSS selector that will get us the top-level DOM node for the player UI. + playerSelector = '.sm2-bar-ui', + playerOptions, + utils; + + /** + * The following are player object event callback examples. + * Override globally by setting window.sm2BarPlayers.on = {}, or individually by window.sm2BarPlayers[0].on = {} etc. + * soundObject is provided for whileplaying() etc., but playback control should be done via the player object. + */ + players.on = { + /* + play: function(player, soundObject) { + console.log('playing', player); + }, + whileplaying: function(player, soundObject) { + console.log('whileplaying', player, soundObject); + }, + finish: function(player, soundObject) { + // each sound + console.log('finish', player); + }, + pause: function(player, soundObject) { + console.log('pause', player); + }, + error: function(player, soundObject) { + console.log('error', player); + }, + end: function(player, soundObject) { + // end of playlist + console.log('end', player); + } + */ + }; + + playerOptions = { + // useful when multiple players are in use, or other SM2 sounds are active etc. + stopOtherSounds: true, + // CSS class to let the browser load the URL directly e.g., download foo.mp3 + excludeClass: 'sm2-exclude' + }; + + soundManager.setup({ + // trade-off: higher UI responsiveness (play/progress bar), but may use more CPU. + html5PollingInterval: 50, + flashVersion: 9 + }); + + soundManager.onready(function () { + + var nodes, i, j; + + nodes = utils.dom.getAll(playerSelector); + + if (nodes && nodes.length) { + for (i = 0, j = nodes.length; i < j; i++) { + players.push(new Player(nodes[i])); + } + } + + }); + + /** + * player bits + */ + + Player = function (playerNode) { + + var css, dom, extras, playlistController, soundObject, actions, actionData, defaultItem, defaultVolume, firstOpen, exports; + + css = { + disabled: 'disabled', + selected: 'selected', + active: 'active', + legacy: 'legacy', + noVolume: 'no-volume', + playlistOpen: 'playlist-open' + }; + + dom = { + o: null, + playlist: null, + playlistTarget: null, + playlistContainer: null, + time: null, + player: null, + progress: null, + progressTrack: null, + progressBar: null, + duration: null, + volume: null + }; + + // prepended to tracks when a sound fails to load/play + extras = { + loadFailedCharacter: '✖' + }; + + function stopOtherSounds() { + + if (playerOptions.stopOtherSounds) { + soundManager.stopAll(); + } + + } + + function callback(method, oSound) { + if (method) { + // fire callback, passing current player and sound objects + if (exports.on && exports.on[method]) { + exports.on[method](exports, oSound); + } else if (players.on[method]) { + players.on[method](exports, oSound); + } + } + } + + function getTime(msec, useString) { + + // convert milliseconds to hh:mm:ss, return as object literal or string + + var nSec = Math.floor(msec / 1000), + hh = Math.floor(nSec / 3600), + min = Math.floor(nSec / 60) - Math.floor(hh * 60), + sec = Math.floor(nSec - (hh * 3600) - (min * 60)); + + // if (min === 0 && sec === 0) return null; // return 0:00 as null + + return (useString ? ((hh ? hh + ':' : '') + (hh && min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec)) : { min: min, sec: sec }); + + } + + function setTitle(item) { + + // given a link, update the "now playing" UI. + + // if this is an