/*! * Kast: Extraordinary SHOUTcast HTML5 Radio Player for jQuery - Material Design * Version: 1.3.1 * © JaguarScript (https://www.jaguarscript.com) */ #kast-play, #kast.kast-minimized { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.16); } #kast-play:active, #kast-play:hover { transition-delay: 0s; } #kast-bar p, #kast-bottom .kast-p-artist, #kast-bottom .kast-p-title, #kast-np-artist, #kast-np-title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .kast-recss, .kast-recss i, .kast-recss li, .kast-recss ul, div.kast-recss p { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; line-height: inherit; list-style: none; width: auto; height: auto; background: 0 0; } #kast-bar, #kast-top { border-radius: 2px 2px 0 0; } #kast, #kast-top { width: 380px; max-height: 100%; max-width: 100%; } #kast i, #kast li, #kast p, #kast ul { font-style: normal; font-weight: 400; padding: 0; margin: 0; } @font-face { font-family: kast-mdi; src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAakAAsAAAAABlgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIF8GNtYXAAAAFoAAAAVAAAAFQXVtKNZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAAmwAAAJsKEARimhlYWQAAAQwAAAANgAAADYJ0ur0aGhlYQAABGgAAAAkAAAAJAdtA8xobXR4AAAEjAAAACwAAAAsIgAFqmxvY2EAAAS4AAAAGAAAABgCHALcbWF4cAAABNAAAAAgAAAAIAAQADRuYW1lAAAE8AAAAZIAAAGS77sdtXBvc3QAAAaEAAAAIAAAACAAAwAAAAMDwAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QYDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkG//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAwBVABUDqwNrAAwAGAAtAAABIgYVFBYzMjY1NCYjFSImNTQ2MzIWFRQGAyIOAhUUHgIzMj4CNTQuAiMCABIZGRISGRkSUHBwUFBwcFBYnHRDQ3ScWFicdENDdJxYAesZEhIZGRISGetwUFBwcFBQcAJrQ3ScWFicdENDdJxYWJx0QwAAAQEAARUDAAJSAAYAAAEXNxcJATcBPMTEPP8A/wA8AlLExD3/AAEAPQAAAAACAQAAjwMAAuUAAwAHAAAlMxEjATMRIwJVq6v+q6urjwJW/aoCVgAAAQFVAI8DKwLlAAMAAAERCQEBVQHW/ioC5f2qASsBKwABAQAAwAMAAsAAAwAAJSERIQMA/gACAMACAAAAAwCAAEoDgAM2ABYAHgAlAAABFR4DFRQOAgcVPgM1NC4CJxM0JicRPgE1JREzFxEHIwJVL045ICA5Ti9AblAtLVBuQGs7MDA7/cCr1dWrAzZYDTdLXDMzW0s3DlgORmJ8RER8YkYO/oo5Wxj+qRdcOID/ANUCqtUABACAAEADgANAAAIAFQAoADEAAAEHFyUHFyMRMxcRFw4BBxU+ATcXNwEFFAYHFz4BNTQuAicVHgMVIzQmJxUXPgE1AgBZWf62NsrKq9W1FTAbLFAhWDb+gAErDAtAFRctUG5AL045IGs7MGkBAQMVWVndNsr/ANUBH7YQGghYCigbVzYBgDYeOBtAKFkwRHxiRg5YDTdLXDM5WxheaQcNBwAAAAABAAAAAQAAVpAQu18PPPUACwQAAAAAANOE00YAAAAA04TTRgAAAAADqwNrAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAOrAAEAAAAAAAAAAAAAAAAAAAALBAAAAAAAAAAAAAAAAgAAAAQAAFUEAAEABAABAAQAAVUEAAEABAAAgAQAAIAAAAAAAAoAFAAeAGAAdgCKAJoAqADkATYAAQAAAAsAMgAEAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAgAAAABAAAAAAACAAcAaQABAAAAAAADAAgAOQABAAAAAAAEAAgAfgABAAAAAAAFAAsAGAABAAAAAAAGAAgAUQABAAAAAAAKABoAlgADAAEECQABABAACAADAAEECQACAA4AcAADAAEECQADABAAQQADAAEECQAEABAAhgADAAEECQAFABYAIwADAAEECQAGABAAWQADAAEECQAKADQAsGthc3QtbWRpAGsAYQBzAHQALQBtAGQAaVZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGthc3QtbWRpAGsAYQBzAHQALQBtAGQAaWthc3QtbWRpAGsAYQBzAHQALQBtAGQAaVJlZ3VsYXIAUgBlAGcAdQBsAGEAcmthc3QtbWRpAGsAYQBzAHQALQBtAGQAaUZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format("woff"); font-weight: 400; font-style: normal; } .kast-recss .kast-mdi { font-family: kast-mdi !important; display: inline-block; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: inherit; font-size: 30px; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } i.kast-mdi-volume-high:before { content: "\e905"; } i.kast-mdi-volume-off:before { content: "\e906"; } i.kast-mdi-album:before { content: "\e900"; } i.kast-mdi-chevron-down:before { content: "\e901"; } i.kast-mdi-pause:before { content: "\e902"; } i.kast-mdi-play:before { content: "\e903"; } i.kast-mdi-stop:before { content: "\e904"; } .kast-light { background-color: #fafafa; } .kast-light #kast-play, .kast-light #kast-top { background-color: #fff; } .kast-light.kast-colored .kast-default-art #kast-linear, .kast-light.kast-transparent .kast-top-content { background-image: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.24)); display: block; } .kast-light.kast-colored .kast-top-content { background-color: #f5f5f5; } .kast-light.kast-colored.kast-colors-dynamic.kast-minimized .kast-top-content { background-color: transparent; } .kast-light #kast-bar { background-color: rgba(255, 255, 255, 0.3); } .kast-light #kast-bar i:hover { background-color: rgba(255, 255, 255, 0.1); } .kast-light #kast-bottom > p { color: rgba(0, 0, 0, 0.38); } .kast-light #kast-bar i, .kast-light #kast-np-title, .kast-light #kast-play, .kast-light #kast-top, .kast-light .kast-p-title { color: rgba(0, 0, 0, 0.87); } .kast-light #kast-bar, .kast-light #kast-np-artist, .kast-light .kast-p-art, .kast-light .kast-p-artist { color: rgba(0, 0, 0, 0.54); } .kast-dark { background-color: #303030; } .kast-dark #kast-play, .kast-dark #kast-top { background-color: #424242; } .kast-dark.kast-colored .kast-default-art #kast-linear, .kast-dark.kast-transparent .kast-top-content { background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.16)); display: block; } .kast-dark.kast-colored .kast-top-content { background-color: #212121; } .kast-dark.kast-colored.kast-colors-dynamic.kast-minimized .kast-top-content { background-color: transparent; } .kast-dark #kast-bar { background-color: rgba(0, 0, 0, 0.2); } .kast-dark #kast-bar i:hover { background-color: rgba(0, 0, 0, 0.1); } .kast-dark #kast-bottom > p { color: rgba(255, 255, 255, 0.3); } .kast-dark #kast-bar i, .kast-dark #kast-np-title, .kast-dark #kast-play, .kast-dark #kast-top, .kast-dark .kast-p-title { color: #fff; } .kast-dark #kast-bar, .kast-dark #kast-np-artist, .kast-dark .kast-p-art, .kast-dark .kast-p-artist { color: rgba(255, 255, 255, 0.7); } #kast.kast-minimized.kast-transparent.kast-light #kast-bar.kast-primary-dark i, .kast-minimized.kast-transparent.kast-light #kast-bar i, .kast-minimized.kast-transparent.kast-light #kast-play, .kast-minimized.kast-transparent.kast-light .kast-top-content #kast-np-title { color: rgba(0, 0, 0, 0.87); } .kast-minimized.kast-transparent.kast-light .kast-top-content #kast-np-artist { color: rgba(0, 0, 0, 0.54); } #kast.kast-minimized.kast-transparent.kast-dark #kast-bar.kast-primary-light i, .kast-minimized.kast-transparent.kast-dark #kast-bar i, .kast-minimized.kast-transparent.kast-dark #kast-play, .kast-minimized.kast-transparent.kast-dark .kast-top-content #kast-np-title { color: #fff; } .kast-minimized.kast-transparent.kast-dark .kast-top-content #kast-np-artist { color: rgba(255, 255, 255, 0.7); } #kast.kast-minimized.kast-colored .kast-top-content.kast-primary-dark + #kast-play { color: rgba(0, 0, 0, 0.87); } #kast.kast-minimized.kast-colored .kast-top-content.kast-primary-light + #kast-play { color: #fff; } #kast-bar.kast-primary-dark i, #kast-play.kast-accent-dark, .kast-top-content.kast-primary-dark #kast-np-title { color: rgba(0, 0, 0, 0.87); } #kast-bar.kast-primary-dark, .kast-top-content.kast-primary-dark #kast-np-artist { color: rgba(0, 0, 0, 0.54); } #kast-bar.kast-primary-light i, #kast-play.kast-accent-light, .kast-top-content.kast-primary-light #kast-np-title { color: #fff; } #kast-bar.kast-primary-light, .kast-top-content.kast-primary-light #kast-np-artist { color: rgba(255, 255, 255, 0.7); } .kast-accent-red #kast-play, .kast-primary-red #kast-top, .kast-primary-red.kast-colored .kast-top-content { background-color: #f44336; color: #fff; } .kast-primary-red #kast-bar { background: rgba(0, 0, 0, 0.2); } .kast-primary-red #kast-bar i:hover { background: rgba(0, 0, 0, 0.1); } .kast-primary-red #kast-bar, .kast-primary-red #kast-np-artist { color: rgba(255, 255, 255, 0.7); } .kast-primary-red #kast-bar i, .kast-primary-red #kast-np-title, .kast-primary-red.kast-minimized:not(.kast-ultra) #kast-play { color: #fff; } .kast-accent-pink #kast-play, .kast-primary-pink #kast-top, .kast-primary-pink.kast-colored .kast-top-content { background-color: #e91e63; color: #fff; } .kast-primary-pink #kast-bar { background: rgba(0, 0, 0, 0.2); } .kast-primary-pink #kast-bar i:hover { background: rgba(0, 0, 0, 0.1); } .kast-primary-pink #kast-bar, .kast-primary-pink #kast-np-artist { color: rgba(255, 255, 255, 0.7); } .kast-primary-pink #kast-bar i, .kast-primary-pink #kast-np-title, .kast-primary-pink.kast-minimized:not(.kast-ultra) #kast-play { color: #fff; } .kast-accent-purple #kast-play, .kast-primary-purple #kast-top, .kast-primary-purple.kast-colored .kast-top-content { background-color: #9c27b0; color: #fff; } .kast-primary-purple #kast-bar { background: rgba(0, 0, 0, 0.2); } .kast-primary-purple #kast-bar i:hover { background: rgba(0, 0, 0, 0.1); } .kast-primary-purple #kast-bar, .kast-primary-purple #kast-np-artist { color: rgba(255, 255, 255, 0.7); } .kast-primary-purple #kast-bar i, .kast-primary-purple #kast-np-title, .kast-primary-purple.kast-minimized:not(.kast-ultra) #kast-play { color: #fff; } .kast-accent-deeppurple #kast-play, .kast-primary-deeppurple #kast-top, .kast-primary-deeppurple.kast-colored .kast-top-content { background-color: #673ab7; color: #fff; } .kast-primary-deeppurple #kast-bar { background: rgba(0, 0, 0, 0.2); } .kast-primary-deeppurple #kast-bar i:hover { background: rgba(0, 0, 0, 0.1); } .kast-primary-deeppurple #kast-bar, .kast-primary-deeppurple #kast-np-artist { color: rgba(255, 255, 255, 0.7); } .kast-primary-deeppurple #kast-bar i, .kast-primary-deeppurple #kast-np-title, .kast-primary-deeppurple.kast-minimized:not(.kast-ultra) #kast-play { color: #fff; } .kast-accent-indigo #kast-play, .kast-primary-indigo #kast-top, .kast-primary-indigo.kast-colored .kast-top-content { background-color: #3f51b5; color: #fff; } .kast-primary-indigo #kast-bar { background: rgba(0, 0, 0, 0.2); } .kast-primary-indigo #kast-bar i:hover { background: rgba(0, 0, 0, 0.1); } .kast-primary-indigo #kast-bar, .kast-primary-indigo #kast-np-artist { color: rgba(255, 255, 255, 0.7); } .kast-primary-indigo #kast-bar i, .kast-primary-indigo #kast-np-title, .kast-primary-indigo.kast-minimized:not(.kast-ultra) #kast-play { color: #fff; } .kast-accent-blue #kast-play, .kast-primary-blue #kast-top, .kast-primary-blue.kast-colored .kast-top-content { background-color: #2196f3; color: #fff; } .kast-primary-blue #kast-bar { background: rgba(0, 0, 0, 0.2); } .kast-primary-blue #kast-bar i:hover { background: rgba(0, 0, 0, 0.1); } .kast-primary-blue #kast-bar, .kast-primary-blue #kast-np-artist { color: rgba(255, 255, 255, 0.7); } .kast-primary-blue #kast-bar i, .kast-primary-blue #kast-np-title, .kast-primary-blue.kast-minimized:not(.kast-ultra) #kast-play { color: #fff; } .kast-accent-lightblue #kast-play, .kast-primary-lightblue #kast-top, .kast-primary-lightblue.kast-colored .kast-top-content { background-color: #03a9f4; color: rgba(0, 0, 0, 0.87); } .kast-primary-lightblue #kast-bar { background: rgba(255, 255, 255, 0.3); } .kast-primary-lightblue #kast-bar i:hover { background: rgba(255, 255, 255, 0.1); } .kast-primary-lightblue #kast-bar, .kast-primary-lightblue #kast-np-artist { color: rgba(0, 0, 0, 0.54); } .kast-primary-lightblue #kast-bar i, .kast-primary-lightblue #kast-np-title, .kast-primary-lightblue.kast-minimized:not(.kast-ultra) #kast-play { color: rgba(0, 0, 0, 0.87); } .kast-accent-cyan #kast-play, .kast-primary-cyan #kast-top, .kast-primary-cyan.kast-colored .kast-top-content { background-color: #00bcd4; color: rgba(0, 0, 0, 0.87); } .kast-primary-cyan #kast-bar { background: rgba(255, 255, 255, 0.3); } .kast-primary-cyan #kast-bar i:hover { background: rgba(255, 255, 255, 0.1); } .kast-primary-cyan #kast-bar, .kast-primary-cyan #kast-np-artist { color: rgba(0, 0, 0, 0.54); } .kast-primary-cyan #kast-bar i, .kast-primary-cyan #kast-np-title, .kast-primary-cyan.kast-minimized:not(.kast-ultra) #kast-play { color: rgba(0, 0, 0, 0.87); } .kast-accent-teal #kast-play, .kast-primary-teal #kast-top, .kast-primary-teal.kast-colored .kast-top-content { background-color: #009688; color: #fff; } .kast-primary-teal #kast-bar { background: rgba(0, 0, 0, 0.2); } .kast-primary-teal #kast-bar i:hover { background: rgba(0, 0, 0, 0.1); } .kast-primary-teal #kast-bar, .kast-primary-teal #kast-np-artist { color: rgba(255, 255, 255, 0.7); } .kast-primary-teal #kast-bar i, .kast-primary-teal #kast-np-title, .kast-primary-teal.kast-minimized:not(.kast-ultra) #kast-play { color: #fff; } .kast-accent-green #kast-play, .kast-primary-green #kast-top, .kast-primary-green.kast-colored .kast-top-content { background-color: #4caf50; color: rgba(0, 0, 0, 0.87); } .kast-primary-green #kast-bar { background: rgba(255, 255, 255, 0.3); } .kast-primary-green #kast-bar i:hover { background: rgba(255, 255, 255, 0.1); } .kast-primary-green #kast-bar, .kast-primary-green #kast-np-artist { color: rgba(0, 0, 0, 0.54); } .kast-primary-green #kast-bar i, .kast-primary-green #kast-np-title, .kast-primary-green.kast-minimized:not(.kast-ultra) #kast-play { color: rgba(0, 0, 0, 0.87); } .kast-accent-lightgreen #kast-play, .kast-primary-lightgreen #kast-top, .kast-primary-lightgreen.kast-colored .kast-top-content { background-color: #8bc34a; color: rgba(0, 0, 0, 0.87); } .kast-primary-lightgreen #kast-bar { background: rgba(255, 255, 255, 0.3); } .kast-primary-lightgreen #kast-bar i:hover { background: rgba(255, 255, 255, 0.1); } .kast-primary-lightgreen #kast-bar, .kast-primary-lightgreen #kast-np-artist { color: rgba(0, 0, 0, 0.54); } .kast-primary-lightgreen #kast-bar i, .kast-primary-lightgreen #kast-np-title, .kast-primary-lightgreen.kast-minimized:not(.kast-ultra) #kast-play { color: rgba(0, 0, 0, 0.87); } .kast-accent-lime #kast-play, .kast-primary-lime #kast-top, .kast-primary-lime.kast-colored .kast-top-content { background-color: #cddc39; color: rgba(0, 0, 0, 0.87); } .kast-primary-lime #kast-bar, .kast-primary-lime #kast-np-artist { color: rgba(0, 0, 0, 0.54); } .kast-primary-lime #kast-bar i, .kast-primary-lime #kast-np-title, .kast-primary-lime.kast-minimized:not(.kast-ultra) #kast-play { color: rgba(0, 0, 0, 0.87); } .kast-accent-yellow #kast-play, .kast-primary-yellow #kast-top, .kast-primary-yellow.kast-colored .kast-top-content { background-color: #ffeb3b; color: rgba(0, 0, 0, 0.87); } .kast-primary-yellow #kast-bar { background: rgba(255, 255, 255, 0.3); } .kast-primary-yellow #kast-bar i:hover { background: rgba(255, 255, 255, 0.1); } .kast-primary-yellow #kast-bar, .kast-primary-yellow #kast-np-artist { color: rgba(0, 0, 0, 0.54); } .kast-primary-yellow #kast-bar i, .kast-primary-yellow #kast-np-title, .kast-primary-yellow.kast-minimized:not(.kast-ultra) #kast-play { color: rgba(0, 0, 0, 0.87); } .kast-accent-amber #kast-play, .kast-primary-amber #kast-top, .kast-primary-amber.kast-colored .kast-top-content { background-color: #ffc107; color: rgba(0, 0, 0, 0.87); } .kast-primary-amber #kast-bar { background: rgba(255, 255, 255, 0.3); } .kast-primary-amber #kast-bar i:hover { background: rgba(255, 255, 255, 0.1); } .kast-primary-amber #kast-bar, .kast-primary-amber #kast-np-artist { color: rgba(0, 0, 0, 0.54); } .kast-primary-amber #kast-bar i, .kast-primary-amber #kast-np-title, .kast-primary-amber.kast-minimized:not(.kast-ultra) #kast-play { color: rgba(0, 0, 0, 0.87); } .kast-accent-orange #kast-play, .kast-primary-orange #kast-top, .kast-primary-orange.kast-colored .kast-top-content { background-color: #ff9800; color: rgba(0, 0, 0, 0.87); } .kast-primary-orange #kast-bar { background: rgba(255, 255, 255, 0.3); } .kast-primary-orange #kast-bar i:hover { background: rgba(255, 255, 255, 0.1); } .kast-primary-orange #kast-bar, .kast-primary-orange #kast-np-artist { color: rgba(0, 0, 0, 0.54); } .kast-primary-orange #kast-bar i, .kast-primary-orange #kast-np-title, .kast-primary-orange.kast-minimized:not(.kast-ultra) #kast-play { color: rgba(0, 0, 0, 0.87); } .kast-accent-deeporange #kast-play, .kast-primary-deeporange #kast-top, .kast-primary-deeporange.kast-colored .kast-top-content { background-color: #ff5722; color: #fff; } .kast-primary-deeporange #kast-bar { background: rgba(0, 0, 0, 0.2); } .kast-primary-deeporange #kast-bar i:hover { background: rgba(0, 0, 0, 0.1); } .kast-primary-deeporange #kast-bar, .kast-primary-deeporange #kast-np-artist { color: rgba(255, 255, 255, 0.7); } .kast-primary-deeporange #kast-bar i, .kast-primary-deeporange #kast-np-title, .kast-primary-deeporange.kast-minimized:not(.kast-ultra) #kast-play { color: #fff; } .kast-accent-brown #kast-play, .kast-primary-brown #kast-top, .kast-primary-brown.kast-colored .kast-top-content { background-color: #795548; color: #fff; } .kast-primary-brown #kast-bar { background: rgba(0, 0, 0, 0.2); } .kast-primary-brown #kast-bar i:hover { background: rgba(0, 0, 0, 0.1); } .kast-primary-brown #kast-bar, .kast-primary-brown #kast-np-artist { color: rgba(255, 255, 255, 0.7); } .kast-primary-brown #kast-bar i, .kast-primary-brown #kast-np-title, .kast-primary-brown.kast-minimized:not(.kast-ultra) #kast-play { color: #fff; } .kast-accent-grey #kast-play, .kast-primary-grey #kast-top, .kast-primary-grey.kast-colored .kast-top-content { background-color: #9e9e9e; color: rgba(0, 0, 0, 0.87); } .kast-primary-grey #kast-bar { background: rgba(255, 255, 255, 0.3); } .kast-primary-grey #kast-bar i:hover { background: rgba(255, 255, 255, 0.1); } .kast-primary-grey #kast-bar, .kast-primary-grey #kast-np-artist { color: rgba(0, 0, 0, 0.54); } .kast-primary-grey #kast-bar i, .kast-primary-grey #kast-np-title, .kast-primary-grey.kast-minimized:not(.kast-ultra) #kast-play { color: rgba(0, 0, 0, 0.87); } .kast-accent-bluegrey #kast-play, .kast-primary-bluegrey #kast-top, .kast-primary-bluegrey.kast-colored .kast-top-content { background-color: #607d8b; color: #fff; } .kast-primary-bluegrey #kast-bar { background: rgba(0, 0, 0, 0.2); } .kast-primary-bluegrey #kast-bar i:hover { background: rgba(0, 0, 0, 0.1); } .kast-primary-bluegrey #kast-bar, .kast-primary-bluegrey #kast-np-artist { color: rgba(255, 255, 255, 0.7); } .kast-primary-bluegrey #kast-bar i, .kast-primary-bluegrey #kast-np-title, .kast-primary-bluegrey.kast-minimized:not(.kast-ultra) #kast-play { color: #fff; } .kast-accent-black #kast-play, .kast-primary-black #kast-top, .kast-primary-black.kast-colored .kast-top-content { background-color: #000; color: #fff; } .kast-primary-black #kast-bar { background: rgba(0, 0, 0, 0.2); } .kast-primary-black #kast-bar i:hover { background: rgba(0, 0, 0, 0.1); } .kast-primary-black #kast-bar, .kast-primary-black #kast-np-artist { color: rgba(255, 255, 255, 0.7); } .kast-primary-black #kast-bar i, .kast-primary-black #kast-np-title, .kast-primary-black.kast-minimized:not(.kast-ultra) #kast-play { color: #fff; } .kast-accent-white #kast-play, .kast-primary-white #kast-top, .kast-primary-white.kast-colored .kast-top-content { background-color: #fff; color: rgba(0, 0, 0, 0.87); } .kast-primary-white #kast-bar { background: rgba(255, 255, 255, 0.3); } .kast-primary-white #kast-bar i:hover { background: rgba(255, 255, 255, 0.1); } .kast-primary-white #kast-bar, .kast-primary-white #kast-np-artist { color: rgba(0, 0, 0, 0.54); } .kast-primary-white #kast-bar i, .kast-primary-white #kast-np-title, .kast-primary-white.kast-minimized:not(.kast-ultra) #kast-play { color: rgba(0, 0, 0, 0.87); } .kast-accent-carolina #kast-play, .kast-primary-carolina #kast-top, .kast-primary-carolina.kast-colored .kast-top-content { background-color: #547591; color: #fff; } .kast-primary-carolina #kast-bar { background: rgba(0, 0, 0, 0.2); } .kast-primary-carolina #kast-bar i:hover { background: rgba(0, 0, 0, 0.1); } .kast-primary-carolina #kast-bar, .kast-primary-carolina #kast-np-artist { color: rgba(255, 255, 255, 0.7); } .kast-primary-carolina #kast-bar i, .kast-primary-carolina #kast-np-title, .kast-primary-carolina.kast-minimized:not(.kast-ultra) #kast-play { color: #fff; } .kast-colored #kast-bottom { margin: 90px 0 0; } .kast-colored .kast-top-content { bottom: -90px; background-image: none; } #kast.kast-colored.kast-current { height: 470px; } #kast-top, #kast.kast-transparent.kast-current { height: 380px; } .kast-transparent.kast-current #kast-play { bottom: 20px; } .kast-clearfix:after, .kast-clearfix:before { content: ""; display: table; } .kast-clearfix:after { clear: both; } #kast { font-size: 14px; line-height: 1.4; font-family: Roboto, Arial, Helvetica, sans-serif; height: 570px; position: fixed; bottom: 0; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); z-index: 9999; border-radius: 2px; -webkit-animation: kastright 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation: kastright 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; will-change: height, box-shadow; } #kast.kast-custom-container { position: relative; } #kast.kast-left { -webkit-animation: kastleft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation: kastleft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; left: 0; } @-webkit-keyframes kastright { 0% { opacity: 0; -webkit-transform: translate3d(380px, 570px, 0) scale3d(0.3, 0.3, 0.3); transform: translate3d(380px, 570px, 0) scale3d(0.3, 0.3, 0.3); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } @keyframes kastright { 0% { opacity: 0; -webkit-transform: translate3d(380px, 570px, 0) scale3d(0.3, 0.3, 0.3); transform: translate3d(380px, 570px, 0) scale3d(0.3, 0.3, 0.3); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } @-webkit-keyframes kastleft { 0% { opacity: 0; -webkit-transform: translate3d(-380px, 570px, 0) scale3d(0.3, 0.3, 0.3); transform: translate3d(-380px, 570px, 0) scale3d(0.3, 0.3, 0.3); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } @keyframes kastleft { 0% { opacity: 0; -webkit-transform: translate3d(-380px, 570px, 0) scale3d(0.3, 0.3, 0.3); transform: translate3d(-380px, 570px, 0) scale3d(0.3, 0.3, 0.3); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } #kast.kast-right { right: 0; } #kast-wrapper { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; border-radius: 2px; } #kast-wrapper::-webkit-scrollbar { display: none; } #kast-bar { height: 30px; line-height: 30px; text-align: right; position: absolute; top: 0; right: 0; z-index: 10; width: 100%; -webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1); } #kast-bar.kast-primary-light { background: rgba(0, 0, 0, 0.2); } #kast-bar.kast-primary-dark { background: rgba(255, 255, 255, 0.3); } #kast.kast-offline #kast-bar { background: #e53935; } #kast-bar i { text-align: center; width: 30px; font-size: 24px; color: #fff; } #kast-bar p { float: left; padding: 0 0 0 10px; width: 80%; text-align: left; } #kast-bar .kast-offline-status, #kast.kast-offline #kast-bar p { display: none; } #kast.kast-offline #kast-bar p.kast-offline-status { display: block; } #kast-bar.kast-primary-light i:hover { background: rgba(0, 0, 0, 0.1); } #kast-bar.kast-primary-dark i:hover { background: rgba(255, 255, 255, 0.1); } #kast-top { position: relative; text-align: center; background-position: 50% 50%; background-size: cover; will-change: height; } #kast-top .kast-album-wrapper { overflow: hidden; width: 100%; height: 100%; } #kast-linear, .kast-top-content { width: 100%; height: 90px; position: absolute; } #kast-top .kast-mdi-album { display: none; font-size: 240px; line-height: 380px; will-change: font-size; } #kast .kast-mdi-album { cursor: default; } #kast-top.kast-default-art .kast-mdi-album { display: inline-block; } #kast-linear, .kast-p-art i.kast-mdi { display: none; } .kast-top-content { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.16)); bottom: 0; left: 0; text-align: left; line-height: 1.4; will-change: bottom; } .kast-current .kast-top-content { border-radius: 0 0 2px 2px; } #kast-nowplaying { padding: 0 0 0 20px; will-change: padding; } #kast-linear { top: -90px; } p#kast-np-title { font-size: 22px; padding: 18px 0 0; will-change: padding; } #kast-np-artist { font-size: 16px; } #kast-np-artist, #kast-np-title { width: 70%; } .kast-not-full-statusbar.kast-minimized #kast-np-artist, .kast-not-full-statusbar.kast-minimized #kast-np-title { width: 85%; } #kast-play, #kast-play i { position: absolute; width: 60px; } #kast-play { height: 60px; text-align: center; border-radius: 50%; line-height: 60px; z-index: 1; bottom: -30px; right: 100px; margin: 0 -80px 0 0; background: #fff; color: rgba(0, 0, 0, 0.87); -webkit-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.28s; transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.28s; will-change: bottom, right, margin, box-shadow; } #kast-play:active { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } #kast-play i { top: 0; left: 0; opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.28s, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.28s, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1); } #kast-play.kast-paused .kast-mdi-play, #kast-play.kast-playing.kast-continuous .kast-mdi-pause, #kast-play.kast-playing:not(.kast-continuous) .kast-mdi-stop, #kast-play.kast-stopped .kast-mdi-play { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #kast-bottom { font-size: 17px; padding: 20px 20px 0; } #kast-bottom > p { padding: 0 0 20px; } #kast-bottom .kast-p-title { font-size: 19px; } #kast-bottom .kast-p-artist, #kast-bottom .kast-p-title { width: 240px; max-width: 100%; } #kast-bottom li { float: left; width: 100%; height: 50px; margin: 0 0 20px; } #kast-bottom li div { float: left; } #kast-bottom .kast-p-info { width: 70%; } .kast-p-art { background-size: cover; background-position: 50% 50%; width: 50px; height: 50px; line-height: 50px; text-align: center; margin: 0 20px 0 0; } .kast-p-art.kast-p-default-art i.kast-mdi { display: inline-block; } #kast, #kast-bar i, #kast-bottom, #kast-bottom div, #kast-bottom i, #kast-bottom li, #kast-bottom p, #kast-nowplaying, #kast-top, #kast-top .kast-mdi-album, .kast-top-content, .kast-top-content p { -webkit-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); } #kast-bottom div, #kast-bottom i, #kast-bottom p { transition-delay: 0.56s; } #kast.kast-maximized, .kast-maximized #kast-top, .kast-maximized .kast-mdi-album, .kast-minimized #kast-play, .kast-minimized #kast-play i { transition-delay: 0s; } #kast.kast-minimized, .kast-maximized #kast-nowplaying, .kast-minimized #kast-top, .kast-minimized .kast-mdi-album, .kast-minimized .kast-top-content { transition-delay: 0.28s; } #kast.kast-current.kast-minimized, #kast.kast-minimized { height: 80px; } .kast-minimized #kast-bar p, .kast-minimized #kast-bottom, .kast-minimized #kast-bottom div, .kast-minimized #kast-bottom i, .kast-minimized #kast-bottom li, .kast-minimized #kast-bottom p, .kast-minimized #kast-top { height: 0; margin: 0; padding: 0; opacity: 0; font-size: 0; visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .kast-minimized #kast-top { opacity: 1; visibility: visible; } .kast-minimized #kast-bottom i, .kast-minimized #kast-bottom p { height: auto; } .kast-minimized #kast-bar { background: 0 0; width: 60px; } .kast-minimized #kast-minmax { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .kast-minimized #kast-play, .kast-minimized.kast-current #kast-play { bottom: -80px; right: 100%; margin: 0 -80px 0 0; box-shadow: none; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .kast-minimized.kast-current:not(.kast-ultra) #kast-play, .kast-minimized:not(.kast-ultra) #kast-play { background-color: transparent !important; border-radius: 0; width: 80px; height: 80px; line-height: 80px; } .kast-minimized #kast-top .kast-mdi-album { font-size: 0; opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .kast-minimized #kast-nowplaying { transition-delay: 0s; height: 80px; padding: 0 0 0 80px; } .kast-minimized #kast-np-title { padding: 13px 0 0; } .kast-minimized #kast-play i { width: 80px; transform: scale(0); } .kast-minimized .kast-top-content { height: 80px; bottom: -80px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); border-radius: 2px; } .kast-minimized.kast-transparent .kast-top-content { background-image: none; } #kast.kast-minimized.kast-ultra { width: 60px; height: 60px; border-radius: 50%; bottom: 15px; -webkit-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .kast-dark.kast-ultra, .kast-light.kast-ultra { background-color: transparent; } #kast.kast-ultra.kast-right { right: 15px; } #kast.kast-ultra.kast-left { left: 15px; } #kast.kast-minimized.kast-ultra:active { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .kast-ultra #kast-top-content, .kast-ultra .kast-album-wrapper { display: none; } .kast-ultra #kast-top { max-width: 100%; } .kast-ultra #kast-nowplaying { height: 60px; } #kast.kast-ultra #kast-play { bottom: -60px; margin: 0 -60px 0 0; } #kast.kast-ultra #kast-play i { width: 60px; } @media only screen and (min-width: 381px) { #kast:not(.kast-thin-container) #kast-wrapper { width: calc(100% + 18px); } } @media only print { #kast { display: none; } }