aboutsummaryrefslogtreecommitdiff
path: root/public/dist/bar-ui.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/dist/bar-ui.css')
-rw-r--r--public/dist/bar-ui.css429
1 files changed, 429 insertions, 0 deletions
diff --git a/public/dist/bar-ui.css b/public/dist/bar-ui.css
new file mode 100644
index 0000000..7001d45
--- /dev/null
+++ b/public/dist/bar-ui.css
@@ -0,0 +1,429 @@
+/**
+ * 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.compact {
+ min-width: 1em;
+ max-width: 20em;
+}
+
+.sm2-bar-ui ul {
+ line-height: 1em;
+}
+
+.sm2-bar-ui .bd,
+.sm2-bar-ui .sm2-extra-controls {
+ position: relative;
+}
+
+.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-bar-ui .bd a {
+ color: #fff;
+}
+
+.sm2-bar-ui .bd a {
+ text-decoration: 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-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: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-inline-time,
+.sm2-inline-duration {
+ color: #000;
+ 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-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: 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: 1px;
+ 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;
+ border: 2px solid #222;
+ padding: 0px;
+/*
+ z-index: 1;
+*/
+ transition: transform 0.15s ease-in-out;
+}
+
+.sm2-progress .sm2-progress-track {
+ background-color: rgba(0,0,0,0.4);
+ 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(/icons/feathericons/play.svg);
+ background-image: none, url(/icons/feathericons/play.svg);
+ background-size: 50%;
+ background-position: 50% 53%;
+}
+
+.playing .sm2-icon-play-pause {
+ background-image: url(/icons/feathericons/pause-circle.svg);
+ background-image: none, url(/icons/feathericons/pause-circle.svg);
+ background-size: 56%;
+ background-position: 50% 53%;
+}
+
+.sm2-volume-control {
+ background-image: url(/icons/feathericons/volume-2.svg);
+ background-image: none, url(/icons/feathericons/volume-2.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(/icons/feathericons/volume-2.svg);
+ background-image: none, url(/icons/feathericons/volume-2.svg);
+}
+
+.sm2-progress-ball .icon-overlay {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0px;
+ left: 0px;
+ background: none, url(/icons/feathericons/loader.svg);
+ background-size: 100%;
+ 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 .bd.sm2-playlist-drawer {
+ opacity: 0.5;
+ /* redraw fix for Chrome, background color doesn't always draw when playlist drawer open. */
+ transform: translateZ(0);
+}
+
+.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-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;
+}
+
+.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%;
+}
+
+/* --- 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;
+}