Created
September 17, 2012 14:28
-
-
Save reinhrst/3737682 to your computer and use it in GitHub Desktop.
Spotify Style Sheets
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Adam Theme / Dark Theme | |
| * Standard Layout for Spotify Client | |
| * Defines the basic styles for an app | |
| * @copyright 2011 by Spotify | |
| */ | |
| /** | |
| * Declarations for Adam Theme | |
| * | |
| * @section declarations | |
| */ | |
| /** | |
| * Import declarations */ | |
| @import url("sp://import/css/core-dark.css"); | |
| @import url("sp://import/css/shared.css"); | |
| /** | |
| * Namespace declaration */ | |
| @namespace sp "http://www.spotify.com/"; | |
| /** | |
| * Adam Theme specific styles | |
| * | |
| * @section styles | |
| */ | |
| html { | |
| background-color: #373737; | |
| color: #999; | |
| } | |
| h1, h2, h3, h4 { | |
| color: #FFF; | |
| font: 14px/19px "Helvetica", "Arial", sans-serif; | |
| } | |
| .offline h1 { | |
| color: #1b1b1b; | |
| font-family: "Helvetica", "Arial", sans-serif; | |
| font-size: 18px; | |
| font-weight: bold; | |
| left: auto; | |
| line-height: 25px; | |
| margin-top: -12px; | |
| position: relative; | |
| top: 50%; | |
| text-align: center; | |
| text-shadow: 1px 1px 0px #515151; | |
| } | |
| /** | |
| * Throbber, Adam Theme / Dark Theme */ | |
| @-webkit-keyframes throbber { | |
| 0% { background-position-x: 0; } | |
| 8.33% { background-position-x: -32px; } | |
| 16.66% { background-position-x: -64px; } | |
| 25% { background-position-x: -96px; } | |
| 33.33% { background-position-x: -128px; } | |
| 41.66% { background-position-x: -160px; } | |
| 50% { background-position-x: -192px; } | |
| 58.33% { background-position-x: -224px; } | |
| 66.66% { background-position-x: -256px; } | |
| 75% { background-position-x: -288px; } | |
| 83.33% { background-position-x: -320px; } | |
| 91.66% { background-position-x: -352px; } | |
| } | |
| .throbber, .throbber div, .throbber span { | |
| position: absolute; | |
| } | |
| .throbber, .throbber span { | |
| left: 0; | |
| right: 0; | |
| } | |
| .throbber div, .throbber span { | |
| top: 50%; | |
| } | |
| .throbber { | |
| -webkit-transition: 400ms opacity; | |
| background: #474747; | |
| bottom: 0; | |
| display: block; | |
| top: 0; | |
| z-index: 10; | |
| } | |
| .throbber div { | |
| -webkit-animation: throbber 1s infinite; | |
| -webkit-animation-timing-function: step-start; | |
| background: url("sp://import/img/throbber-big-white.png") 0 0 no-repeat; | |
| height: 32px; | |
| margin: -16px -16px 0 0; | |
| right: 50%; | |
| width: 32px; | |
| z-index: 10; | |
| } | |
| .throbber span { | |
| color: #DDD; | |
| margin-top: 16px; | |
| text-align: center; | |
| text-shadow: initial; | |
| } | |
| .paging a { | |
| background-image: url(sp://import/img/paginationDark25x25.png); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Importer for all api specific styles. | |
| * @copyright 2011 by Spotify | |
| */ | |
| /** | |
| * Import declarations | |
| * | |
| * @section declarations | |
| */ | |
| @import url("sp://import/css/image.css"); | |
| @import url("sp://import/css/grid.css"); | |
| @import url("sp://import/css/list.css"); | |
| @import url("sp://import/css/pager.css"); | |
| @import url("sp://import/css/player.css"); | |
| @import url("sp://import/css/popover.css"); | |
| .sp-image { | |
| display: inline-block; | |
| background-clip: content-box; | |
| background-size: cover; | |
| } | |
| .sp-drag-image { | |
| background: #FFF; | |
| border: 1px solid #000; | |
| color: #000; | |
| font-size: 11px; | |
| line-height: 18px; | |
| max-width: 100%; | |
| opacity: 0.99; | |
| padding: 0 4px; | |
| position: fixed; | |
| text-shadow: initial; | |
| top: 0; | |
| z-index: -1; | |
| } | |
| /** | |
| * .sp-button | |
| * Spotify namespaced button, same as new-button in shared.css but follows the namespace rules | |
| * also w/ primary, flat and with additional icons for sharing and stuff | |
| */ | |
| .sp-button { | |
| -webkit-border-image: url("sp://import/img/info_group-button.png") 0 7 42 7; | |
| background: initial; | |
| border: initial; | |
| border-width: 0 7px; | |
| box-sizing: border-box; | |
| color: #333; | |
| cursor: default; | |
| display: inline-block; | |
| font-size: 12px; | |
| line-height: 17px; | |
| margin: 0; | |
| max-width: 100%; | |
| overflow: hidden; | |
| padding: 2px; | |
| text-decoration: none; | |
| text-overflow: ellipsis; | |
| text-shadow: 0 1px 0 #EEE; | |
| white-space: nowrap; | |
| } | |
| .sp-button:active { | |
| -webkit-border-image: url("sp://import/img/info_group-button.png") 21 11 21 11; | |
| } | |
| .sp-button:disabled { | |
| -webkit-border-image: url("sp://import/img/info_group-button.png") 42 11 0 11; | |
| text-shadow: 0 1px 0 #AAA; | |
| } | |
| /** | |
| * .sp-button.sp-primary | |
| * @description: .sp-button w/ primary style | |
| */ | |
| .sp-button.sp-primary { | |
| -webkit-border-image: url("sp://import/img/button.png") 0 5 75 5; | |
| background: initial; | |
| border: initial; | |
| border-width: 0 5px; | |
| box-sizing: border-box; | |
| color: #FFF; | |
| cursor: default; | |
| display: inline-block; | |
| font-size: 12px; | |
| line-height: 19px; | |
| margin: 0; | |
| max-width: 100%; | |
| overflow: hidden; | |
| padding: 3px 3px 3px; | |
| text-decoration: none; | |
| text-overflow: ellipsis; | |
| text-shadow: 0 -1px 0 rgba(0, 0, 0, .27); | |
| white-space: nowrap; | |
| } | |
| .sp-button.sp-primary:active { | |
| -webkit-border-image: url("sp://import/img/button.png") 25 5 50 5; | |
| } | |
| .sp-button.sp-primary:disabled { | |
| -webkit-border-image: url("sp://import/img/button.png") 0 5 75 5; | |
| opacity: 0.3; | |
| } | |
| /** | |
| * .sp-button.sp-flat | |
| * @description: Flat style button | |
| */ | |
| .sp-button.sp-flat { | |
| -webkit-border-image: initial; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: initial; | |
| border-width: 1px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| color: #A0A0A0; | |
| padding: 2px 10px 3px; | |
| text-shadow: none; | |
| } | |
| .sp-button.sp-flat:hover { | |
| background-color: rgba(0, 0, 0, 0.6); | |
| color: #FFF; | |
| } | |
| .sp-button.sp-flat:active { | |
| background-color: rgba(0, 0, 0, 0.8); | |
| color: #787878; | |
| } | |
| .sp-button.sp-flat:disabled { | |
| opacity: 0.3; | |
| } | |
| /* Light version */ | |
| .sp-button.sp-flat.sp-light { | |
| background-color: rgba(0, 0, 0, 0.1); | |
| color: #747474; | |
| } | |
| .sp-button.sp-flat.sp-light:hover { | |
| background-color: rgba(0, 0, 0, 0.2); | |
| color: #686868; | |
| } | |
| .sp-button.sp-flat.sp-light:active { | |
| background-color: rgba(0, 0, 0, 0.3); | |
| color: #585858; | |
| } | |
| /** | |
| * .sp-button.sp-icon | |
| * @usage: Buttons that requires icons e.g. share playlist | |
| */ | |
| .sp-button.sp-icon { | |
| position : relative; | |
| padding-left : 17px; | |
| } | |
| .sp-button.sp-icon span { | |
| display : inline-block; | |
| position : absolute; | |
| top : 4px; | |
| left : 0px; | |
| width : 14px; | |
| height : 14px; | |
| margin-right : 3px; | |
| overflow : hidden; | |
| } | |
| .sp-button.sp-icon .sp-plus::before { | |
| position : absolute; | |
| left : 0px; | |
| left : 0px; | |
| content : url('sp://import/img/button-icons.png'); | |
| } | |
| .sp-button.sp-icon .sp-share::before { | |
| position : absolute; | |
| top : -14px; | |
| left : 0px; | |
| content : url('sp://import/img/button-icons.png'); | |
| } | |
| .sp-button.sp-icon .sp-minus::before { | |
| position : absolute; | |
| top : -28px; | |
| left : 0px; | |
| content : url('sp://import/img/button-icons.png'); | |
| } | |
| .sp-button.sp-icon .sp-get::before { | |
| position : absolute; | |
| top : -42px; | |
| left : 0px; | |
| content : url('sp://import/img/button-icons.png'); | |
| } | |
| .sp-button.sp-icon .sp-radio::before { | |
| position : absolute; | |
| top : -56px; | |
| left : 0px; | |
| content : url('sp://import/img/button-icons.png'); | |
| } | |
| /* TODO: Add classes for .sp-button.flat.icon once we get the sprites from Tobi */ | |
| a { -webkit-user-drag: element; } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("sp://import/css/reset.css"); | |
| /** | |
| * Adam Theme core / Dark Theme core | |
| * Adam themed webkit core layout for Spotify Client | |
| * Defines the basic dark styles for the client | |
| * @copyright 2011 by Spotify | |
| */ | |
| /* Search Cancel button */ | |
| ::-webkit-search-cancel-button { | |
| display: none; | |
| } | |
| /* Form errors */ | |
| ::-webkit-validation-bubble-message { | |
| display: none; | |
| } | |
| /* Scrollbars */ | |
| ::-webkit-scrollbar { | |
| height: 14px; | |
| width: 14px; | |
| } | |
| ::-webkit-scrollbar-corner { | |
| background: url("sp://import/img/scrollbars/dark/corner.png"); | |
| } | |
| ::-webkit-scrollbar-thumb:horizontal { | |
| background: | |
| url("sp://import/img/scrollbars/dark/horizontal-thumb-left.png") no-repeat left, | |
| url("sp://import/img/scrollbars/dark/horizontal-thumb-right.png") no-repeat right, | |
| url("sp://import/img/scrollbars/dark/horizontal-thumb-middle.png"); | |
| min-width: 20px; | |
| padding-left: 7px; | |
| padding-right: 7px; | |
| -webkit-background-clip: border-box, border-box, content-box; | |
| } | |
| ::-webkit-scrollbar-thumb:vertical { | |
| background: | |
| url("sp://import/img/scrollbars/dark/vertical-thumb-top.png") no-repeat top, | |
| url("sp://import/img/scrollbars/dark/vertical-thumb-bottom.png") no-repeat bottom, | |
| url("sp://import/img/scrollbars/dark/vertical-thumb-middle.png"); | |
| min-height: 20px; | |
| padding-top: 7px; | |
| padding-bottom: 7px; | |
| -webkit-background-clip: border-box, border-box, content-box; | |
| } | |
| /* | |
| * Horizontal Together | |
| */ | |
| ::-webkit-scrollbar-button:horizontal:increment:double-button { | |
| background: url("sp://import/img/scrollbars/dark/button-right-together.png"); | |
| width: 16px; | |
| } | |
| ::-webkit-scrollbar-button:horizontal:decrement:double-button { | |
| background: url("sp://import/img/scrollbars/dark/button-left-together.png"); | |
| width: 22px; | |
| } | |
| ::-webkit-scrollbar-button:horizontal:increment:double-button:active { | |
| background: url("sp://import/img/scrollbars/dark/button-right-together-pressed.png"); | |
| } | |
| ::-webkit-scrollbar-button:horizontal:decrement:double-button:active { | |
| background: url("sp://import/img/scrollbars/dark/button-left-together-pressed.png"); | |
| } | |
| ::-webkit-scrollbar-track:horizontal { | |
| background: | |
| url("sp://import/img/scrollbars/dark/horizontal-track-left.png") no-repeat left, | |
| url("sp://import/img/scrollbars/dark/horizontal-track.png"); | |
| } | |
| ::-webkit-scrollbar-track-piece:horizontal:start { | |
| margin-left: 4px; | |
| } | |
| ::-webkit-scrollbar-track-piece:double-button:horizontal:end { | |
| margin-right: -5px; | |
| } | |
| /* | |
| * Horizontal Separate | |
| */ | |
| ::-webkit-scrollbar-button:horizontal:increment:single-button { | |
| background: url("sp://import/img/scrollbars/dark/button-right.png"); | |
| width: 21px; | |
| } | |
| ::-webkit-scrollbar-button:horizontal:decrement:single-button { | |
| background: url("sp://import/img/scrollbars/dark/button-left.png"); | |
| width: 21px; | |
| } | |
| ::-webkit-scrollbar-button:horizontal:increment:single-button:active { | |
| background: url("sp://import/img/scrollbars/dark/button-right-pressed.png"); | |
| } | |
| ::-webkit-scrollbar-button:horizontal:decrement:single-button:active { | |
| background: url("sp://import/img/scrollbars/dark/button-left-pressed.png"); | |
| } | |
| ::-webkit-scrollbar-track-piece:single-button:horizontal:start { | |
| background: url("sp://import/img/scrollbars/dark/horizontal-track.png") no-repeat 5px 0px; /* Hack to hide horizontal-track-left. */ | |
| margin-left: -5px; | |
| } | |
| ::-webkit-scrollbar-track-piece:single-button:horizontal:end { | |
| margin-right: -5px; | |
| } | |
| /* | |
| * Vertical Together | |
| */ | |
| ::-webkit-scrollbar-button:vertical:increment:double-button { | |
| background: url("sp://import/img/scrollbars/dark/button-down-together.png"); | |
| height: 16px; | |
| } | |
| ::-webkit-scrollbar-button:vertical:decrement:double-button { | |
| background: url("sp://import/img/scrollbars/dark/button-up-together.png"); | |
| height: 22px; | |
| } | |
| ::-webkit-scrollbar-button:vertical:increment:double-button:active { | |
| background: url("sp://import/img/scrollbars/dark/button-down-together-pressed.png"); | |
| } | |
| ::-webkit-scrollbar-button:vertical:decrement:double-button:active { | |
| background: url("sp://import/img/scrollbars/dark/button-up-together-pressed.png"); | |
| } | |
| ::-webkit-scrollbar-track:vertical { | |
| background: | |
| url("sp://import/img/scrollbars/dark/vertical-track-top.png") no-repeat top, | |
| url("sp://import/img/scrollbars/dark/vertical-track.png"); | |
| } | |
| ::-webkit-scrollbar-track-piece:vertical:start { | |
| margin-top: 4px; | |
| } | |
| ::-webkit-scrollbar-track-piece:double-button:vertical:end { | |
| margin-bottom: -5px; | |
| } | |
| /* | |
| * Vertical Separate | |
| */ | |
| ::-webkit-scrollbar-button:vertical:increment:single-button { | |
| background: url("sp://import/img/scrollbars/dark/button-down.png"); | |
| height: 21px; | |
| } | |
| ::-webkit-scrollbar-button:vertical:decrement:single-button { | |
| background: url("sp://import/img/scrollbars/dark/button-up.png"); | |
| height: 21px; | |
| } | |
| ::-webkit-scrollbar-button:vertical:increment:single-button:active { | |
| background: url("sp://import/img/scrollbars/dark/button-down-pressed.png"); | |
| } | |
| ::-webkit-scrollbar-button:vertical:decrement:single-button:active { | |
| background: url("sp://import/img/scrollbars/dark/button-up-pressed.png"); | |
| } | |
| ::-webkit-scrollbar-track-piece:single-button:vertical:start { | |
| background: url("sp://import/img/scrollbars/dark/vertical-track.png") no-repeat 0px 5px; /* Hack to hide vertical-track-top. */ | |
| margin-top: -5px; | |
| } | |
| ::-webkit-scrollbar-track-piece:single-button:vertical:end { | |
| margin-bottom: -5px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * GridWidget Style | |
| * Standard Layout for Spotify Client HTML Grids | |
| * @copyright 2011 by Spotify | |
| */ | |
| /** | |
| * @section styles | |
| */ | |
| /** .grid | |
| * grid placeholder class */ | |
| .grid { | |
| min-height: 100%; | |
| min-width: 100%; | |
| position: relative; | |
| } | |
| /** .grid.vertical | |
| * vertical grid class */ | |
| .grid.vertical { | |
| overflow-x: hidden; | |
| width: 100%; | |
| } | |
| /** div.viewport | |
| * Grid uses this if the body isn't the viewport */ | |
| div.viewport { | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * ImageWidget Style | |
| * Standard Layout for Spotify Client HTML Images | |
| * @copyright 2011 by Spotify | |
| */ | |
| /** | |
| * @section styles | |
| */ | |
| /** .image | |
| * Image placeholder class | |
| */ | |
| .image { | |
| -webkit-transition: 200ms opacity; | |
| background-position: 50% 50%; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| border-radius: 3px; | |
| box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .1), 0 1px 2px #222; | |
| display: block; | |
| overflow: hidden; | |
| line-height: 0; | |
| } | |
| /* reset.css: */ | |
| /** | |
| * Mini reset for | |
| * html, body, ul, h1, h2, h3, h4, h5, h6, p, ul, ol, | |
| * :focus, a, a:hover, var, button, input, textarea, | |
| * input[type="search"], fieldset, legend | |
| * | |
| * @section reset | |
| */ | |
| html, body, ul, h1, h2, h3, h4, h5, h6, p, fieldset { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, body { overflow: initial; } | |
| html { | |
| -webkit-font-smoothing: subpixel-antialiased; | |
| -webkit-user-select: none; | |
| cursor: default; | |
| font: 12px/17px "Lucida Grande", "Tahoma", "Arial", sans-serif; | |
| height: 100%; | |
| } | |
| ul, ol { list-style: none; } | |
| :focus { outline: initial; } | |
| button, input, textarea { | |
| -webkit-appearance: none; | |
| font-family: inherit; | |
| font-size: 12px; | |
| } | |
| fieldset { | |
| border: 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * List view styles | |
| */ | |
| .sp-list { | |
| max-height: 600px; | |
| margin: 0; | |
| overflow: auto; | |
| text-shadow: initial; | |
| width: 100%; | |
| } | |
| .sp-list > div { | |
| background-color: #373737; | |
| background-image: -webkit-linear-gradient(#373737, #373737 50%, #313131 50%, #313131); | |
| background-size: 40px 40px; | |
| border-spacing: initial; | |
| color: #DDD; | |
| display: table; | |
| font-size: 11px; | |
| left: 0; | |
| line-height: 20px; | |
| position: relative; | |
| right: 0; | |
| table-layout: fixed; | |
| top: 0; | |
| width: 100%; | |
| } | |
| .sp-list .sp-item { | |
| color: #DDD; | |
| cursor: default; | |
| display: table; | |
| position: absolute; | |
| table-layout: fixed; | |
| text-decoration: none; | |
| width: 100%; | |
| } | |
| .sp-list .sp-track-playing { | |
| background-image: -webkit-linear-gradient(#232323, #232323 1px, #262626 2px, #1F1F1F); | |
| } | |
| .sp-list .sp-item.sp-track-selected { | |
| background-color: #6C6C6C; | |
| background-image: none; | |
| } | |
| .sp-list .sp-track-playing { color: #AFFF84; } | |
| .sp-list .sp-item.sp-track-selected { color: #BBB; } | |
| .sp-list:focus .sp-item.sp-track-selected { background-color: #A1D9FF; } | |
| .sp-list:focus .sp-item.sp-track-selected { color: #2B3844; } | |
| .sp-list .sp-item * { color: inherit; } | |
| .sp-list .sp-item > span { | |
| display: table-cell; | |
| overflow: hidden; | |
| padding: 0 5px; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .sp-list .sp-track-field-star { | |
| position: relative; | |
| width: 26px; | |
| } | |
| /* sp-icon-star override on playing */ | |
| .sp-list .sp-track-playing .sp-icon-star:not(:hover) { | |
| background-image: url("sp://import/img/mainlist-row-playing-marker.png"); | |
| background-position: 7px 4px; | |
| padding: 2px 7px; | |
| width: 12px; | |
| } | |
| .sp-list:focus .sp-item.sp-track-selected.sp-track-playing .sp-icon-star:not(:hover) { background-position-x: -17px; } | |
| .sp-list .sp-item.sp-track-selected.sp-track-playing .sp-icon-star:not(:hover) { background-position-x: -5px; } | |
| .sp-list .sp-track-playing.sp-track-paused .sp-icon-star:not(:hover) { background-position-x: -29px; } | |
| .sp-list:focus .sp-item.sp-track-selected.sp-track-playing.sp-track-paused .sp-icon-star:not(:hover) { background-position-x: -53px; } | |
| .sp-list .sp-item.sp-track-selected.sp-track-playing.sp-track-paused .sp-icon-star:not(:hover) { background-position-x: -41px; } | |
| /* sp-track-field-share */ | |
| .sp-list .sp-track-field-share { | |
| position: relative; | |
| width: 30px; | |
| } | |
| .sp-list :-webkit-any(.sp-track-field-duration, .sp-track-field-number) { | |
| text-align: right; | |
| width: 50px; | |
| } | |
| .sp-list .sp-track-field-number { width: 30px; } | |
| /* Unavailable */ | |
| .sp-list .sp-track:not(.sp-track-availability-0):not(.sp-track-selected) .sp-track-field-name, | |
| .sp-list .sp-track:not(.sp-track-selected) :-webkit-any(.sp-track-field-duration, .sp-track-field-number) { color: #888; } | |
| /* Premium */ | |
| .sp-list .sp-track:not(.sp-track-selected).sp-track-availability-3 .sp-track-field-name { color: #776990; } | |
| .sp-list .sp-track a { text-decoration: initial; } | |
| .sp-list .sp-track a:hover { text-decoration: underline; } | |
| /** .sp-icon-star | |
| * | |
| * @usage: star/unstar specific track | |
| */ | |
| /* state track unstarred */ | |
| .sp-icon-star { | |
| background-image: url("sp://import/img/mainlist-star-simple-dark.png"); | |
| background-position-x: -43px; | |
| background-position-y: 2px; | |
| background-repeat: no-repeat; | |
| background-clip: content-box; | |
| display: inline-block; | |
| height: 16px; | |
| left: 0; | |
| padding: 2px 5px; | |
| position: absolute; | |
| top: 0; | |
| width: 16px; | |
| } | |
| .sp-icon-star:hover { background-position-x: -59px; } | |
| .sp-icon-star:active { background-position-x: -75px; } | |
| /* state track starred */ | |
| .sp-track-starred .sp-icon-star { background-position-x: 5px; } | |
| .sp-track-starred .sp-icon-star:hover { background-position-x: -11px; } | |
| .sp-track-starred .sp-icon-star:active { background-position-x: -27px; } | |
| /* state selected track starred */ | |
| .sp-track-selected.sp-track-starred .sp-icon-star { background-position-x: -91px; } | |
| .sp-track-selected.sp-track-starred .sp-icon-star:hover { background-position-x: -11px; } | |
| .sp-track-selected.sp-track-starred .sp-icon-star:active { background-position-x: -27px; } | |
| /** .sp-icon-share | |
| * | |
| * @usage: share tracks | |
| */ | |
| .sp-icon-share { | |
| background: url("sp://import/img/mainlist-share.png") 5px 0 no-repeat; | |
| background-clip: content-box; | |
| display: inline-block; | |
| height: 16px; | |
| left: 0; | |
| padding: 2px 5px; | |
| position: absolute; | |
| top: 0; | |
| vertical-align: -2px; | |
| width: 20px; | |
| } | |
| .sp-icon-share:hover { background-position-x: -15px; } | |
| .sp-icon-share:active { background-position-x: -35px; } | |
| :focus .sp-track-selected .sp-icon-share { background-position-x: -55px; } | |
| :focus .sp-track-selected .sp-icon-share:hover { background-position-x: -75px; } | |
| :focus .sp-track-selected .sp-icon-share:active { background-position-x: -95px; } | |
| /** .sp-icon-share | |
| * | |
| * @usage: share tracks | |
| */ | |
| .sp-popularity-indicator { | |
| background: url("sp://import/img/popularity-indicator.png") 0 -8px repeat-x; | |
| background-clip: content-box; | |
| display: block; | |
| } | |
| .sp-popularity-indicator-value { | |
| background: url("sp://import/img/popularity-indicator.png") 0 0 repeat-x; | |
| display: block; | |
| height: 8px; | |
| } | |
| .sp-list .sp-track-availability-0 .sp-popularity-indicator { background-position-y: -8px; } | |
| .sp-list .sp-track-availability-0 .sp-popularity-indicator-value { background-position-y: 0; } | |
| .sp-list .sp-track:not(.sp-track-availability-0) .sp-popularity-indicator { background-position-y: -24px; } | |
| .sp-list .sp-track:not(.sp-track-availability-0) .sp-popularity-indicator-value { background-position-y: -16px; } | |
| .sp-list .sp-track-playing .sp-popularity-indicator { background-position-y: -104px; } | |
| .sp-list .sp-track-playing .sp-popularity-indicator-value { background-position-y: -96px; } | |
| .sp-list:focus .sp-track-selected .sp-popularity-indicator { background-position-y: -56px; } | |
| .sp-list:focus .sp-track-selected .sp-popularity-indicator-value { background-position-y: -48px; } | |
| /** | |
| * Light theme | |
| * | |
| * @usage: add class .sp-light to sp-list | |
| */ | |
| .sp-list.sp-light .sp-item { | |
| color: #333; | |
| } | |
| .sp-list.sp-light > div { | |
| background-color: initial; | |
| background-image: -webkit-linear-gradient(rgba(0, 0, 0, .07), rgba(0, 0, 0, .07) 50%, transparent 50%, transparent); | |
| } | |
| .sp-light .sp-icon-star { | |
| background-image: url("sp://import/img/mainlist-star-simple-light.png"); | |
| } | |
| .sp-light .sp-icon-share { | |
| background-image: url("sp://import/img/mainlist-share-light.png"); | |
| } | |
| .sp-list.sp-light .sp-track-playing { | |
| color: #fff; | |
| text-shadow: 0px -1px 0px #6f6f6f; | |
| } | |
| .sp-list.sp-light .sp-track-playing { | |
| background-image: -webkit-linear-gradient(top, #c1c1c1 1px, #a6a6a6 1px, #818181 100%); | |
| } | |
| .sp-list.sp-light .sp-track-playing .sp-icon-star:not(:hover) { | |
| background-image: url("sp://import/img/mainlist-row-playing-marker-light.png"); | |
| } | |
| /* Ugly workaround, we should get a new png from Pontus */ | |
| .sp-track-selected.sp-track-starred .sp-icon-star:hover, | |
| .sp-track-selected.sp-track-starred .sp-icon-star:active { | |
| background-image: url("sp://import/img/mainlist-star-simple-dark.png"); | |
| } | |
| .sp-list.sp-light .sp-item.sp-track-selected { | |
| background-color: #a2a2a2; | |
| background-image: initial; | |
| } | |
| .sp-list.sp-light .sp-item.sp-track-selected, .sp-list.sp-light .sp-item.sp-track-selected * { | |
| color: #fff; | |
| text-shadow: 0px 1px 0px rgba(0, 0, 0, .27); | |
| } | |
| .sp-list.sp-light:focus .sp-item.sp-track-selected { | |
| background-color: #4f86de; | |
| background-image: initial; | |
| } | |
| .sp-list.sp-light:focus .sp-item.sp-track-selected, .sp-list.sp-light:focus .sp-item.sp-track-selected * { | |
| color: #fff; | |
| text-shadow: 0px 1px 0px #2e79aa; | |
| } | |
| .sp-list.sp-light .sp-track:not(.sp-track-selected) :-webkit-any(.sp-track-field-duration, .sp-track-field-number) { | |
| color: #666; | |
| } | |
| .sp-list.sp-light .sp-track.sp-track-playing :-webkit-any(.sp-track-field-duration, .sp-track-field-number) { | |
| color: #fff; | |
| text-shadow: 0px -1px 0px #6f6f6f; | |
| } | |
| .sp-list.sp-light:focus a.sp-item.sp-track-selected.sp-track-playing :-webkit-any(.sp-track-field-duration, .sp-track-field-number) { | |
| color: #fff; | |
| } | |
| .sp-list.sp-light a.sp-item.sp-track-selected.sp-track-playing :-webkit-any(.sp-track-field-duration, .sp-track-field-number) { | |
| color: #666; | |
| text-shadow: none; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * PagerWidget Style | |
| * Standard Layout for Spotify Client HTML Pagers | |
| * @copyright 2011 by Spotify | |
| */ | |
| /** | |
| * @section styles | |
| */ | |
| .pager { | |
| position: relative; | |
| } | |
| .pager .window { | |
| overflow: hidden; | |
| position: relative; | |
| clear: both; | |
| } | |
| .pager .window ul, .pager .window table { | |
| width: 100%; | |
| height: 100%; | |
| -webkit-transition: top .3s, left .3s; | |
| } | |
| .pager .window.no-animations ul, .pager .window.no-animations table { | |
| -webkit-transition-duration: 0; | |
| } | |
| .paging { | |
| min-width: 50px; | |
| opacity: .4; | |
| pointer-events: none; | |
| text-align: center; | |
| } | |
| .paging.active { | |
| -webkit-transition: all .4s; | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .paging li { | |
| display: inline-block; | |
| height: 25px; | |
| width: 25px; | |
| } | |
| .paging .inactive { | |
| opacity: .4; | |
| pointer-events: none; | |
| } | |
| .paging a { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| text-indent: -999em; | |
| background: url(sp://import/img/pagination25x25.png) -125px 0; | |
| cursor: default; | |
| -webkit-user-drag: none; | |
| } | |
| .paging .active a { | |
| background-position-x: -100px; | |
| } | |
| .paging .prev a { | |
| background-position-x: 0; | |
| } | |
| .paging .prev a:active { | |
| background-position-x: -25px; | |
| } | |
| .vertical .paging .prev a { | |
| background-position-x: -225px; | |
| } | |
| .vertical .paging .prev a:active { | |
| background-position-x: -250px; | |
| } | |
| .paging .next a { | |
| background-position-x: -50px; | |
| } | |
| .paging .next a:active { | |
| background-position-x: -75px; | |
| } | |
| .vertical .paging .next a { | |
| background-position-x: -175px; | |
| } | |
| .vertical .paging .next a:active { | |
| background-position-x: -200px; | |
| } | |
| /* Pager on top */ | |
| .pager.paging-top h2 { | |
| overflow: hidden; | |
| margin-right: 60px; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .pager.paging-top .paging { | |
| position: absolute; | |
| top: -4px; | |
| right: 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * PlayerWidget Style | |
| * Standard Layout for Spotify Client HTML Players | |
| * @copyright 2011 by Spotify | |
| */ | |
| /** | |
| * @section styles | |
| */ | |
| /** | |
| * Player styles | |
| */ | |
| .sp-player { | |
| display: inline-block; | |
| height: 128px; | |
| position: relative; | |
| width: 128px; | |
| z-index: 10; | |
| } | |
| .sp-player-image { | |
| cursor: default; | |
| -webkit-transition: 200ms opacity; | |
| background-position: 50% 50%; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| border-radius: 3px; | |
| box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .1), 0 1px 2px #222; | |
| display: block; | |
| height: 100%; | |
| line-height: 0; | |
| overflow: hidden; | |
| width: 100%; | |
| } | |
| /* Default player (Medium) | |
| * | |
| * @usage: Player size 128x128 - applicable on 150x150 | |
| */ | |
| .sp-player .sp-image { | |
| cursor: pointer; | |
| position: relative; | |
| display: inline-block; | |
| height: 100%; | |
| width: 100%; | |
| background-clip: content-box; | |
| background-size: 100%; | |
| } | |
| .sp-player .sp-player-button { | |
| position: absolute; | |
| bottom: 4%; | |
| right: 4%; | |
| width: 43px; | |
| height: 43px; | |
| border: none; | |
| background: url("sp://import/img/play-button-M.png") transparent; | |
| background-position-x: -90px; | |
| display: block; | |
| } | |
| .sp-player.sp-player-paused .sp-player-button { display: none;} | |
| .sp-player.sp-player-paused:hover .sp-player-button { display: block;} | |
| .sp-player.sp-player-paused .sp-player-button { background-position-x: 0px;} | |
| .sp-player.sp-player-paused .sp-player-button:hover { background-position-x: -45px; } | |
| .sp-player .sp-player-button:hover { background-position-x: -135px;} | |
| /* Small player | |
| * | |
| * @usage: Player size 64x64 - applicable on 54x54 | |
| */ | |
| .sp-player.sp-image-small { | |
| width: 64px; | |
| height: 64px; | |
| } | |
| .sp-player.sp-image-small .sp-player-button { | |
| background: url("sp://import/img/play-button-S.png") transparent; | |
| width: 30px; | |
| height: 30px; | |
| background-position-x: -64px; | |
| } | |
| .sp-player.sp-image-small.sp-player-paused .sp-player-button { background-position-x: 0px;} | |
| .sp-player.sp-image-small.sp-player-paused .sp-player-button:hover { background-position-x: -32px;} | |
| .sp-player.sp-image-small .sp-player-button:hover { background-position-x: -96px;} | |
| /* Large player | |
| * | |
| * @usage: Player size 200x200 | |
| */ | |
| .sp-player.sp-image-large { | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .sp-player.sp-image-large .sp-player-button { | |
| background: url("sp://import/img/play-button-L.png") transparent; | |
| width: 66px; | |
| height: 66px; | |
| background-position-x: -136px; | |
| } | |
| .sp-player.sp-image-large.sp-player-paused .sp-player-button { background-position-x: 0px;} | |
| .sp-player.sp-image-large.sp-player-paused .sp-player-button:hover { background-position-x: -68px;} | |
| .sp-player.sp-image-large .sp-player-button:hover { background-position-x: -204px;} | |
| /* Extra large player | |
| * | |
| * @usage: Player size 256x256 | |
| */ | |
| .sp-player.sp-image-extra-large { | |
| width: 256px; | |
| height: 256px; | |
| } | |
| .sp-player.sp-image-extra-large .sp-player-button { | |
| background: url("sp://import/img/play-button-XL.png") transparent; | |
| width: 79px; | |
| height: 79px; | |
| background-position-x: -162px; | |
| } | |
| .sp-player.sp-image-extra-large.sp-player-paused .sp-player-button { background-position-x: 0px;} | |
| .sp-player.sp-image-extra-large.sp-player-paused .sp-player-button:hover { background-position-x: -81px;} | |
| .sp-player.sp-image-extra-large .sp-player-button:hover { background-position-x: -243px;} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * PopoverWidget Style | |
| * Standard Layout for Spotify Client HTML Popovers | |
| * @copyright 2011 by Spotify | |
| */ | |
| /** | |
| * Animations for Popovers | |
| * | |
| * @section animations | |
| */ | |
| @-webkit-keyframes show-popover { | |
| 0% { -webkit-transform: scale(0); opacity: 0; } | |
| 50% { -webkit-transform: scale(1.1); } | |
| 100% { -webkit-transform: scale(1); opacity: 1; } | |
| } | |
| @-webkit-keyframes hide-popover { | |
| 0% { opacity: 1; } | |
| 100% { opacity: 0; } | |
| } | |
| @-webkit-keyframes sending-popover { | |
| 0% { -webkit-transform: scale(1); opacity: 1; } | |
| 100% { -webkit-transform: scale(0); opacity: 0; } | |
| } | |
| /** | |
| * @section styles | |
| */ | |
| .popover { | |
| -webkit-animation-duration: 300ms; | |
| -webkit-animation-fill-mode: forwards; | |
| -webkit-animation-iteration-count: 1; | |
| -webkit-animation-name: show-popover; | |
| -webkit-border-image: url("sp://import/img/popover-down.png") 15 15 20 35 / 15px 15px 20px 35px; | |
| -webkit-transform-origin: 23px top; | |
| border-width: 7px; | |
| box-sizing: border-box; | |
| left: -3px; | |
| margin-top: 27px; | |
| max-width: 376px; | |
| opacity: 1; | |
| padding: 14px 12px 16px 12px; | |
| position: absolute; | |
| right: 11px; | |
| text-shadow: initial; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .popover.hidden { | |
| -webkit-animation-duration: 200ms; | |
| -webkit-animation-name: hide-popover; | |
| } | |
| .popover.sent { | |
| -webkit-animation-duration: 300ms; | |
| -webkit-animation-name: sending-popover; | |
| } | |
| .popover.inverted { | |
| -webkit-border-image: url("sp://import/img/popover-up.png") 15 15 25 35 / 15px 15px 25px 35px; | |
| -webkit-transform-origin: 23px bottom; | |
| border-width: 7px; | |
| margin-top: -7px; | |
| padding: 8px 12px 22px 12px; | |
| } | |
| .popover.flipped { | |
| -webkit-border-image: url("sp://import/img/popover-flipped.png") 15 35 20 15 / 15px 35px 20px 15px; | |
| -webkit-transform-origin: 177px top; | |
| border-width: 7px; | |
| } | |
| .popover.inverted.flipped { | |
| -webkit-border-image: url("sp://import/img/popover-flipped-up.png") 15 35 25 15 / 15px 35px 25px 15px; | |
| -webkit-transform-origin: 177px bottom; | |
| padding: 8px 12px 22px 12px; | |
| } | |
| .popover .optional-message { | |
| display: block; | |
| margin-bottom: 10px; | |
| } | |
| .popover .optional-message a { | |
| color: #666; | |
| font-weight: bold; | |
| } | |
| .popover .checkmark { | |
| -webkit-transition: 400ms opacity; | |
| background: #f1f1f1; | |
| display: block; | |
| left: 4px; | |
| position: absolute; | |
| top: 8px; | |
| z-index: 10; | |
| } | |
| .popover.inverted .checkmark { | |
| bottom: 14px; | |
| top: auto; | |
| } | |
| .popover .checkmark div { | |
| background: url('sp://import/img/checkmark.png') 0 0 no-repeat; | |
| height: 66px; | |
| margin: -33px -31px 0 0; | |
| position: absolute; | |
| right: 50%; | |
| top: 50%; | |
| width: 62px; | |
| z-index: 10; | |
| } | |
| .popover .popover-share > div { | |
| height: 50px; | |
| margin-bottom: 7px; | |
| padding: 0 0 0 57px; | |
| position: relative; | |
| } | |
| .popover .title a { | |
| color: #666; | |
| } | |
| .popover form { | |
| text-align: right; | |
| white-space: nowrap; | |
| } | |
| .popover textarea { | |
| border: 1px solid #AAA; | |
| border-radius: 3px; | |
| box-shadow: 0 1px 0 #FFF; | |
| box-sizing: border-box; | |
| display: block; | |
| height: 48px; | |
| margin-bottom: 7px; | |
| resize: none; | |
| width: 100%; | |
| } | |
| .popover .new-button:last-child { margin-left: 7px; } | |
| .popover .artwork { | |
| height: 50px; | |
| left: 0; | |
| position: absolute; | |
| top: 0; | |
| width: 50px; | |
| } | |
| .popover .artwork .image { | |
| border: 0; | |
| -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), inset 0 0 1px rgba(0,0,0,0.4), 0 1px 0px rgba(255,255,255,0.5); | |
| height: 48px; | |
| width: 48px; | |
| } | |
| .popover .artwork .album { background-image: url("sp://import/img/placeholders/50-album.png"); } | |
| .popover .artwork .artist { background-image: url("sp://import/img/placeholders/50-artist.png"); } | |
| .popover .artwork .playlist { background-image: url("sp://import/img/placeholders/50-playlist.png"); } | |
| .popover .artwork .track { background-image: url("sp://import/img/placeholders/50-track.png"); } | |
| .popover .title { | |
| color: #666; | |
| font-family: "Helvetica", "Arial", sans-serif; | |
| font-size: 14px; | |
| font-weight: bold; | |
| line-height: 25px; | |
| padding-top: 3px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello,
Im not at all proficient with code.. Im a photographer and founder of the celebrity charity art project Six Beats Of Separation.
Im wondering.. Would you be able to donate some of yoru time to helping us with a customized implementation of a Spotify play button on our site www.SixBeatsOfSeparation.org ?
Cheers,
jason joseph