spotify app stylesheets

adam.css

/**
 * 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);
}

core-dark.css

@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;
}

list.css

/**
 * 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;
}

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;
}

shared.css

/**
 * Shared styles for Spotify Client Themes
 * These styles can be overridden in Parent Theme file
 * @copyright 2011 by Spotify
 */

/**
 * Custom drag image workaround
 *
 * @workaround
 * @affects		all known browsers
 * @valid		yes
 */
a {
	-webkit-user-drag: element;
	color: #999;
	text-decoration: none;
}
a:hover { text-decoration: underline; }
var { font-style: initial; }
button, input, textarea {
	-webkit-appearance: none;
	font-family: inherit;
	font-size: 12px;
}
textarea {
	border-radius: 5px;
	line-height: 16px;
	min-height: 48px;
	overflow: hidden;
	padding: 4px 7px;
}
input[type="search"] {
	background-image: url("sp://import/img/toolbar-search_glass.png");
	background-repeat: no-repeat;
	background-position: 7px 6px;
	padding-left: 16px;
}
fieldset {
	padding: 0;
}
legend {
	-webkit-appearance: none;
	display: block;
	margin: 0;
}

/**
 * Shared classes
 *
 * @section styles
 */

 /** .exernal-link
  *
  * @usage: Links that unfocus the Spotify application e.g. pops a browser
  */
a[href^='http:']::after {
	margin-left: 3px;
	content: url('sp://import/img/icon-external.png');
	opacity: 0.5;
}
	a[href^='http:']:hover::after {
		opacity: 1;
	}
a.no-ext-icon[href^='http:']::after {
	content: none;
}

/** .offline
 * Global offline style */
.offline {
	height: 100%;
	pointer-events: none;
}

/** .box
 * Evenly spaced list
 * Set ul class="box spaced-X" */
.box {
	display: -webkit-box;
}
ul.spaced-7 li + li {
	margin-left: 7px;
}
ul.spaced-14 li + li {
	margin-left: 14px;
}

/** .trunc
 * Trancated element class w/ ellipsis */
.sp-text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/**
 * .button
 *
 * @description Classic button class
 * @usage Depricated, use .sp-button in api.css instead
 */
.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;
}
	.button:active {
		-webkit-border-image: url("sp://import/img/info_group-button.png") 21 11 21 11;
	}
	.button:disabled {
		-webkit-border-image: url("sp://import/img/info_group-button.png") 42 11 0 11;
		text-shadow: 0 1px 0 #AAA;
	}
	/** .button.icon
	 *
	 * @usage: Buttons that requires icons e.g. share playlist
	 */
	.button.icon span {
		display: inline-block;
		position: relative;
		top: 2px;
		height: 12px;
		width: 14px;
		margin-right: 3px;
		overflow: hidden;
	}
		.button.icon .plus::before {
			position: relative;
			top: 0;
			content: url('sp://import/img/button-icons.png');
		}
		.button.icon .share::before {
			position: relative;
			top: -12px;
			content: url('sp://import/img/button-icons.png');
		}
		.button.icon .cross::before {
			position: relative;
			top: -23px;
			content: url('sp://import/img/button-icons.png');
		}

/**
 * .new-button
 *
 * @description New button class w/ primary
 * @usage Depricated, use .sp-button in api.css instead
 */
.new-button {
	-webkit-border-image: url("sp://import/img/button.png") 50 5 25 5;
	background: initial;
	border: initial;
	border-width: 0 5px;
	box-sizing: border-box;
	color: #373737;
	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 #FAFAFA;
	white-space: nowrap;
}
.new-button:active {
	-webkit-border-image: url("sp://import/img/button.png") 75 5 0 5;
}
.new-button:disabled, .new-button.primary:disabled {
	-webkit-border-image: url("sp://import/img/button.png") 50 5 25 5;
	opacity: 0.3;
}
.new-button.primary {
	-webkit-border-image: url("sp://import/img/button.png") 0 5 75 5;
	color: #FFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .27);
}
.new-button.primary:active {
	-webkit-border-image: url("sp://import/img/button.png") 25 5 50 5;
}
.new-button.primary:disabled {
	-webkit-border-image: url("sp://import/img/button.png") 0 5 75 5;
}

/** .sp-drag-image
  * Global class for draggables */
.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;
}
/** .drag-over
 * Global class for droppables */
.drag-over > * { pointer-events: none; }
/**
 * Workaround until there's :drag-over or similar, class is set in JS
 *
 * @workaround
 * @affected	all known browsers
 * @valid		yes
 */
.drag-over::before {
	background-color: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.99);
	border-radius: 3px;
	bottom: 0;
	content: "";
	display: block;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
}

/** .input
 * input field class */
.input {
	-webkit-border-image: url("sp://import/img/input.png") 0 14 80 14;
	background: transparent;
	border-width: 0 14px;
	box-sizing: border-box;
	color: #000;
	display: inline-block;
	height: 35px;
	line-height: 12px;
	outline: 0;
	margin: -4px;
	padding: 1px;
	resize: none;
}
.input:focus, .input.focus {
	-webkit-border-image: url("sp://import/img/input.png") 80 14 0 14;
}
.input:disabled {
	-webkit-text-fill-color: #999;
	-webkit-border-image: url("sp://import/img/input.png") 40 14 40 14;
	color: #999;
}
.input::-webkit-input-placeholder {
	color: #999;
}

Is it possible to get any of the images files somewhere?

👍 image files 😀