21426 lines
573 KiB
CSS
Executable File
21426 lines
573 KiB
CSS
Executable File
@charset "UTF-8";
|
||
/**
|
||
* The contents of this file is owned and generated by the Global Design Systems team.
|
||
*
|
||
* If you require changes making to the values stored here please reach out
|
||
* to #design-systems on Slack.
|
||
*
|
||
* Do not edit this file directly.
|
||
*
|
||
* Tack!
|
||
* Global Design Systems Team
|
||
* design.spotify.net
|
||
*/
|
||
/**
|
||
* Spoticons
|
||
*
|
||
* Variable Set: Spoticons
|
||
*
|
||
* Styleguide 1.2.1
|
||
*/
|
||
/* stylelint-disable max-nesting-depth */
|
||
/**
|
||
* Common color usages
|
||
*
|
||
* These colors are provided because they might be needed in many places where
|
||
* they should be synced up.
|
||
*/
|
||
/**
|
||
* Vertical Grid System
|
||
* --------------------
|
||
*
|
||
* We try to adhere to a baseline grid, which is a vertical grid with lines
|
||
* every X pixels. The baseline of text should always fall on this line.
|
||
*/
|
||
/**
|
||
* Horizontal Grid System
|
||
* ----------------------
|
||
*
|
||
* This grid system is responsive in four sizes, where all sizes use a 12 column
|
||
* grid.
|
||
*
|
||
* Since the values are calculated, you need to compile the Less code to see the
|
||
* values. From glue, run `node tools/output-grid-values.js` to see
|
||
* the values.
|
||
*
|
||
* Here's a reference for what to use the variables for:
|
||
*
|
||
* Min Width (including scroll bar)
|
||
* --------------------------------
|
||
* Including scroll bar: $glue-screen-min
|
||
* Excluding scroll bar: $glue-body-width-min
|
||
*
|
||
* Max Width (of content, space on the sides)
|
||
* ------------------------------------------
|
||
* Including scroll bar: $glue-screen-max
|
||
* Excluding scroll bar: $glue-body-width-max
|
||
*
|
||
* Page Gutter (gutter on the sides of the page)
|
||
* ---------------------------------------------
|
||
* Size: $glue-grid-page-gutter
|
||
*
|
||
* Extra Small (xs)
|
||
* ----------------
|
||
* Gutter size: $glue-grid-column-gutter-xs
|
||
* View width range: $glue-screen-min to $glue-screen-xs-max
|
||
*
|
||
* Small (sm)
|
||
* ----------
|
||
* Gutter size: $glue-grid-column-gutter-sm
|
||
* View width range: $glue-screen-sm-min to $glue-screen-sm-max
|
||
*
|
||
* Medium (md)
|
||
* -----------
|
||
* Gutter size: $glue-grid-column-gutter-md
|
||
* View width range: $glue-screen-md-min to $glue-screen-md-max
|
||
*
|
||
* Large (lg)
|
||
* ----------
|
||
* Gutter size: $glue-grid-column-gutter-lg
|
||
* View width range: $glue-screen-lg-min to $glue-screen-lg-max
|
||
*/
|
||
/* stylelint-disable selector-max-type */
|
||
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
|
||
article,
|
||
aside,
|
||
details,
|
||
figcaption,
|
||
figure,
|
||
footer,
|
||
header,
|
||
hgroup,
|
||
main,
|
||
nav,
|
||
section,
|
||
summary {
|
||
display: block;
|
||
}
|
||
|
||
audio,
|
||
canvas,
|
||
video {
|
||
display: inline-block;
|
||
}
|
||
|
||
audio:not([controls]) {
|
||
display: none;
|
||
height: 0;
|
||
}
|
||
|
||
[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
html {
|
||
font-family: sans-serif;
|
||
-webkit-text-size-adjust: 100%;
|
||
-ms-text-size-adjust: 100%;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
}
|
||
|
||
a:focus {
|
||
outline: none;
|
||
}
|
||
|
||
a:active,
|
||
a:hover {
|
||
outline: 0;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2em;
|
||
}
|
||
|
||
h1 {
|
||
margin: 0.67em 0;
|
||
}
|
||
|
||
abbr[title] {
|
||
border-bottom: 1px dotted;
|
||
}
|
||
|
||
b,
|
||
strong {
|
||
font-weight: var(--glue-font-weight-bold);
|
||
}
|
||
|
||
dfn {
|
||
font-style: italic;
|
||
}
|
||
|
||
hr {
|
||
-moz-box-sizing: content-box;
|
||
box-sizing: content-box;
|
||
height: 0;
|
||
}
|
||
|
||
mark {
|
||
color: #000;
|
||
}
|
||
|
||
mark {
|
||
background: #ff0;
|
||
}
|
||
|
||
code,
|
||
kbd,
|
||
pre,
|
||
samp {
|
||
font-family: monospace, serif;
|
||
font-size: 1em;
|
||
}
|
||
|
||
code, kbd, pre, samp {
|
||
margin: 0;
|
||
}
|
||
|
||
pre {
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
q {
|
||
quotes: "“" "”" "‘" "’";
|
||
}
|
||
|
||
small {
|
||
font-size: 80%;
|
||
}
|
||
|
||
sub,
|
||
sup {
|
||
font-size: 75%;
|
||
line-height: 0;
|
||
position: relative;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
sup {
|
||
top: -0.5em;
|
||
}
|
||
|
||
sub {
|
||
bottom: -0.25em;
|
||
}
|
||
|
||
img {
|
||
border: 0;
|
||
}
|
||
|
||
svg:not(:root) {
|
||
overflow: hidden;
|
||
}
|
||
|
||
figure {
|
||
margin: 0;
|
||
}
|
||
|
||
fieldset {
|
||
border: 1px solid #c0c0c0;
|
||
margin: 0 2px;
|
||
padding: 0.35em 0.625em 0.75em;
|
||
}
|
||
|
||
legend {
|
||
border: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
button,
|
||
input,
|
||
select,
|
||
textarea {
|
||
font-family: inherit;
|
||
font-size: 100%;
|
||
}
|
||
|
||
button, input, select, textarea {
|
||
margin: 0;
|
||
}
|
||
|
||
button,
|
||
input {
|
||
line-height: normal;
|
||
}
|
||
|
||
button,
|
||
select {
|
||
text-transform: none;
|
||
}
|
||
|
||
button,
|
||
html input[type=button],
|
||
input[type=reset],
|
||
input[type=submit] {
|
||
-webkit-appearance: button;
|
||
}
|
||
|
||
input[type=checkbox],
|
||
input[type=radio] {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
input[type=checkbox], input[type=radio] {
|
||
padding: 0;
|
||
}
|
||
|
||
input[type=search] {
|
||
-webkit-appearance: textfield;
|
||
-moz-box-sizing: content-box;
|
||
-webkit-box-sizing: content-box;
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
input[type=search]::-webkit-search-cancel-button,
|
||
input[type=search]::-webkit-search-decoration {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
button::-moz-focus-inner, input::-moz-focus-inner {
|
||
border: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
textarea {
|
||
overflow: auto;
|
||
vertical-align: top;
|
||
}
|
||
|
||
table {
|
||
border-spacing: 0;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "spotify-circular";
|
||
src: url("https://local_resource_host/fonts/CircularSpUIv3T-Light.ttf") format("truetype");
|
||
font-weight: 200;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular";
|
||
src: url("https://local_resource_host/fonts/CircularSpUIv3T-Book.ttf") format("truetype");
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular";
|
||
src: url("https://local_resource_host/fonts/CircularSpUIv3T-Bold.ttf") format("truetype");
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular";
|
||
src: url("https://local_resource_host/fonts/CircularSpUIv3T-Black.ttf") format("truetype");
|
||
font-weight: 900;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular-arabic";
|
||
src: url("https://local_resource_host/fonts/CircularSpUIAraOnly-Light.woff2") format("woff2");
|
||
font-weight: 200;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular-arabic";
|
||
src: url("https://local_resource_host/fonts/CircularSpUIAraOnly-Book.woff2") format("woff2");
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular-arabic";
|
||
src: url("https://local_resource_host/fonts/CircularSpUIAraOnly-Bold.woff2") format("woff2");
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular-arabic";
|
||
src: url("https://local_resource_host/fonts/CircularSpUIAraOnly-Black.woff2") format("woff2");
|
||
font-weight: 900;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular-hebrew";
|
||
src: url("https://local_resource_host/fonts/CircularSpUIHbrOnly-Light.woff2") format("woff2");
|
||
font-weight: 200;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular-hebrew";
|
||
src: url("https://local_resource_host/fonts/CircularSpUIHbrOnly-Book.woff2") format("woff2");
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular-hebrew";
|
||
src: url("https://local_resource_host/fonts/CircularSpUIHbrOnly-Bold.woff2") format("woff2");
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular-hebrew";
|
||
src: url("https://local_resource_host/fonts/CircularSpUIHbrOnly-Black.woff2") format("woff2");
|
||
font-weight: 900;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular-cyrillic";
|
||
src: url("https://local_resource_host/fonts/CircularSpUICyrOnly-Light.woff2") format("woff2");
|
||
font-weight: 200;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular-cyrillic";
|
||
src: url("https://local_resource_host/fonts/CircularSpUICyrOnly-Book.woff2") format("woff2");
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular-cyrillic";
|
||
src: url("https://local_resource_host/fonts/CircularSpUICyrOnly-Bold.woff2") format("woff2");
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
}
|
||
@font-face {
|
||
font-family: "spotify-circular-cyrillic";
|
||
src: url("https://local_resource_host/fonts/CircularSpUICyrOnly-Black.woff2") format("woff2");
|
||
font-weight: 900;
|
||
font-style: normal;
|
||
}
|
||
@keyframes glue-keyframes-rotate-ltr {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
@keyframes glue-keyframes-rotate-rtl {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(-360deg);
|
||
}
|
||
}
|
||
/* stylelint-disable selector-max-type */
|
||
body {
|
||
--glue-font-family: "spotify-circular", "spotify-circular-cyrillic",
|
||
"spotify-circular-arabic", "spotify-circular-hebrew", "Helvetica Neue",
|
||
Helvetica, Arial, "Hiragino Kaku Gothic Pro", "Meiryo", "MS Gothic",
|
||
sans-serif;
|
||
}
|
||
|
||
body {
|
||
--glue-font-family-zh-Hant: "spotify-circular", "spotify-circular-cyrillic",
|
||
"spotify-circular-arabic", "spotify-circular-hebrew", "Helvetica Neue",
|
||
Helvetica, Arial, "Microsoft JhengHei", "PingFang TC", "Lantinghei TC",
|
||
"Hiragino Kaku Gothic Pro", "Meiryo", "MS Gothic", sans-serif;
|
||
}
|
||
|
||
body {
|
||
--glue-font-family-vi: "spotify-circular-cyrillic", "spotify-circular-arabic",
|
||
"spotify-circular-hebrew", "Helvetica Neue", Helvetica, Arial,
|
||
"Microsoft JhengHei", "PingFang TC", "Lantinghei TC",
|
||
"Hiragino Kaku Gothic Pro", "Meiryo", "MS Gothic", sans-serif;
|
||
}
|
||
|
||
body {
|
||
--glue-font-family-monospace: Monaco, Menlo, Consolas, "Courier New",
|
||
monospace;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--glue-font-family);
|
||
-webkit-font-smoothing: antialiased;
|
||
--glue-font-weight-normal: 400;
|
||
--glue-font-weight-bold: 700;
|
||
--glue-font-weight-black: 900;
|
||
}
|
||
|
||
html:lang(zh-Hant) body {
|
||
font-family: var(--glue-font-family-zh-Hant);
|
||
}
|
||
|
||
html:lang(vi) body {
|
||
font-family: var(--glue-font-family-vi);
|
||
}
|
||
|
||
body {
|
||
overflow-x: hidden;
|
||
overflow-y: scroll;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: none;
|
||
color: #b3b3b3;
|
||
-webkit-tap-highlight-color: transparent;
|
||
position: relative;
|
||
min-height: 100vh;
|
||
user-select: none;
|
||
}
|
||
|
||
body {
|
||
background-color: #181818;
|
||
cursor: default;
|
||
}
|
||
|
||
|
||
input,
|
||
button,
|
||
select,
|
||
textarea {
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
line-height: inherit;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
}
|
||
|
||
strong {
|
||
font-weight: var(--glue-font-weight-bold);
|
||
}
|
||
|
||
p {
|
||
margin: 0 0 10px;
|
||
}
|
||
|
||
a {
|
||
color: #ffffff;
|
||
text-decoration: none;
|
||
}
|
||
|
||
a {
|
||
border-bottom: 1px solid transparent;
|
||
}
|
||
|
||
a:hover,
|
||
a:focus,
|
||
a.contextmenu-active {
|
||
color: #ffffff;
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:hover, a:focus, a.contextmenu-active {
|
||
border-bottom-color: currentcolor;
|
||
}
|
||
a:hover:active,
|
||
a:focus:active,
|
||
a.contextmenu-active:active {
|
||
color: #b3b3b3;
|
||
}
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
/**
|
||
* Common color usages
|
||
*
|
||
* These colors are provided because they might be needed in many places where
|
||
* they should be synced up.
|
||
*/
|
||
/**
|
||
* Vertical Grid System
|
||
* --------------------
|
||
*
|
||
* We try to adhere to a baseline grid, which is a vertical grid with lines
|
||
* every X pixels. The baseline of text should always fall on this line.
|
||
*/
|
||
/**
|
||
* Horizontal Grid System
|
||
* ----------------------
|
||
*
|
||
* This grid system is responsive in four sizes, where all sizes use a 12 column
|
||
* grid.
|
||
*
|
||
* Since the values are calculated, you need to compile the Less code to see the
|
||
* values. From glue, run `node tools/output-grid-values.js` to see
|
||
* the values.
|
||
*
|
||
* Here's a reference for what to use the variables for:
|
||
*
|
||
* Min Width (including scroll bar)
|
||
* --------------------------------
|
||
* Including scroll bar: $glue-screen-min
|
||
* Excluding scroll bar: $glue-body-width-min
|
||
*
|
||
* Max Width (of content, space on the sides)
|
||
* ------------------------------------------
|
||
* Including scroll bar: $glue-screen-max
|
||
* Excluding scroll bar: $glue-body-width-max
|
||
*
|
||
* Page Gutter (gutter on the sides of the page)
|
||
* ---------------------------------------------
|
||
* Size: $glue-grid-page-gutter
|
||
*
|
||
* Extra Small (xs)
|
||
* ----------------
|
||
* Gutter size: $glue-grid-column-gutter-xs
|
||
* View width range: $glue-screen-min to $glue-screen-xs-max
|
||
*
|
||
* Small (sm)
|
||
* ----------
|
||
* Gutter size: $glue-grid-column-gutter-sm
|
||
* View width range: $glue-screen-sm-min to $glue-screen-sm-max
|
||
*
|
||
* Medium (md)
|
||
* -----------
|
||
* Gutter size: $glue-grid-column-gutter-md
|
||
* View width range: $glue-screen-md-min to $glue-screen-md-max
|
||
*
|
||
* Large (lg)
|
||
* ----------
|
||
* Gutter size: $glue-grid-column-gutter-lg
|
||
* View width range: $glue-screen-lg-min to $glue-screen-lg-max
|
||
*/
|
||
/**
|
||
* Grid system
|
||
*
|
||
* Also see the demo on spotify:app:glue-grid-demo
|
||
*/
|
||
body::before {
|
||
content: "xs";
|
||
display: none;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1480px;
|
||
}
|
||
|
||
.container {
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
|
||
.container::after {
|
||
content: "";
|
||
display: table;
|
||
}
|
||
.container::after {
|
||
clear: both;
|
||
}
|
||
|
||
.row {
|
||
margin-left: -8px;
|
||
margin-right: -8px;
|
||
}
|
||
|
||
|
||
.row::after {
|
||
content: "";
|
||
display: table;
|
||
}
|
||
.row::after {
|
||
clear: both;
|
||
}
|
||
.row .row {
|
||
margin-left: -8px;
|
||
margin-right: -8px;
|
||
}
|
||
|
||
@media (min-width: 592px) {
|
||
.row {
|
||
margin-left: -8px;
|
||
margin-right: -8px;
|
||
}
|
||
|
||
.row .row {
|
||
margin-left: -8px;
|
||
margin-right: -8px;
|
||
}
|
||
|
||
}
|
||
@media (min-width: 820px) {
|
||
.row {
|
||
margin-left: -10px;
|
||
margin-right: -10px;
|
||
}
|
||
|
||
.row .row {
|
||
margin-left: -10px;
|
||
margin-right: -10px;
|
||
}
|
||
|
||
}
|
||
@media (min-width: 1280px) {
|
||
.row {
|
||
margin-left: -12px;
|
||
margin-right: -12px;
|
||
}
|
||
|
||
.row .row {
|
||
margin-left: -12px;
|
||
margin-right: -12px;
|
||
}
|
||
|
||
}
|
||
|
||
.col-xs-1,
|
||
.col-xs-2,
|
||
.col-xs-3,
|
||
.col-xs-4,
|
||
.col-xs-5,
|
||
.col-xs-6,
|
||
.col-xs-7,
|
||
.col-xs-8,
|
||
.col-xs-9,
|
||
.col-xs-10,
|
||
.col-xs-11,
|
||
.col-xs-12,
|
||
.col-sm-1,
|
||
.col-sm-2,
|
||
.col-sm-3,
|
||
.col-sm-4,
|
||
.col-sm-5,
|
||
.col-sm-6,
|
||
.col-sm-7,
|
||
.col-sm-8,
|
||
.col-sm-9,
|
||
.col-sm-10,
|
||
.col-sm-11,
|
||
.col-sm-12,
|
||
.col-md-1,
|
||
.col-md-2,
|
||
.col-md-3,
|
||
.col-md-4,
|
||
.col-md-5,
|
||
.col-md-6,
|
||
.col-md-7,
|
||
.col-md-8,
|
||
.col-md-9,
|
||
.col-md-10,
|
||
.col-md-11,
|
||
.col-md-12,
|
||
.col-lg-1,
|
||
.col-lg-2,
|
||
.col-lg-3,
|
||
.col-lg-4,
|
||
.col-lg-5,
|
||
.col-lg-6,
|
||
.col-lg-7,
|
||
.col-lg-8,
|
||
.col-lg-9,
|
||
.col-lg-10,
|
||
.col-lg-11,
|
||
.col-lg-12 {
|
||
position: relative;
|
||
min-height: 1px;
|
||
}
|
||
|
||
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* Clamping
|
||
*
|
||
* There are times when you will want to show a clean line of items. Say just one row.
|
||
* But with a responsive layout that row can have 3, 4 or 6 items in it. To ease this,
|
||
* there are clamp classes for each grid size (except `xs`). If you only want 6 items
|
||
* in the small grid size use `clamp-sm-6`, if you want 12 items in the large grid
|
||
* size use `clamp-sm-12`. You set the clamp class on the containing element (usually
|
||
* a `.row`).
|
||
*
|
||
* NOTE: Max item clamp is 18
|
||
*
|
||
* Markup: <div class="row clamp-sm-2 clamp-md-3 clamp-lg-4 grid-demo">
|
||
* <div class="col-sm-6 col-md-4 col-lg-3">
|
||
* Item 1
|
||
* </div>
|
||
* <div class="col-sm-6 col-md-4 col-lg-3">
|
||
* Item 2
|
||
* </div>
|
||
* <div class="col-sm-6 col-md-4 col-lg-3">
|
||
* Item 3
|
||
* </div>
|
||
* <div class="col-sm-6 col-md-4 col-lg-3">
|
||
* Item 4
|
||
* </div>
|
||
* <div class="col-sm-6 col-md-4 col-lg-3">
|
||
* Item 5
|
||
* </div>
|
||
* </div>
|
||
*
|
||
*
|
||
* Styleguide 10.1.2
|
||
*/
|
||
/**
|
||
* Grid Gutters
|
||
*
|
||
* The `.col-*` classes give a gutter horizontally, but not vertically.
|
||
* If you want an equal vertical gutter, usually because the elements are in
|
||
* a grid, add `.standard-grid` to the containing element (usually a `.row`).
|
||
*
|
||
* Markup: <div class="row standard-grid clamp-sm-4 clamp-md-6 clamp-lg-8 grid-demo">
|
||
* <div class="col-sm-6 col-md-4 col-lg-3">
|
||
* Item 1
|
||
* </div>
|
||
* <div class="col-sm-6 col-md-4 col-lg-3">
|
||
* Item 2
|
||
* </div>
|
||
* <div class="col-sm-6 col-md-4 col-lg-3">
|
||
* Item 3
|
||
* </div>
|
||
* <div class="col-sm-6 col-md-4 col-lg-3">
|
||
* Item 4
|
||
* </div>
|
||
* <div class="col-sm-6 col-md-4 col-lg-3">
|
||
* Item 5
|
||
* </div>
|
||
* <div class="col-sm-6 col-md-4 col-lg-3">
|
||
* Item 6
|
||
* </div>
|
||
* <div class="col-sm-6 col-md-4 col-lg-3">
|
||
* Item 7
|
||
* </div>
|
||
* <div class="col-sm-6 col-md-4 col-lg-3">
|
||
* Item 8
|
||
* </div>
|
||
* </div>
|
||
*
|
||
*
|
||
* Styleguide 10.1.3
|
||
*/
|
||
.standard-grid > * {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/**
|
||
* Extra Small Grid
|
||
*/
|
||
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
|
||
float: left;
|
||
}
|
||
|
||
|
||
.col-xs-1 {
|
||
width: 8.3333333333%;
|
||
}
|
||
|
||
.col-xs-2 {
|
||
width: 16.6666666667%;
|
||
}
|
||
|
||
.col-xs-3 {
|
||
width: 25%;
|
||
}
|
||
|
||
.col-xs-4 {
|
||
width: 33.3333333333%;
|
||
}
|
||
|
||
.col-xs-5 {
|
||
width: 41.6666666667%;
|
||
}
|
||
|
||
.col-xs-6 {
|
||
width: 50%;
|
||
}
|
||
|
||
.col-xs-7 {
|
||
width: 58.3333333333%;
|
||
}
|
||
|
||
.col-xs-8 {
|
||
width: 66.6666666667%;
|
||
}
|
||
|
||
.col-xs-9 {
|
||
width: 75%;
|
||
}
|
||
|
||
.col-xs-10 {
|
||
width: 83.3333333333%;
|
||
}
|
||
|
||
.col-xs-11 {
|
||
width: 91.6666666667%;
|
||
}
|
||
|
||
.col-xs-12 {
|
||
width: 100%;
|
||
}
|
||
|
||
.col-xs-push-1 {
|
||
left: 8.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-push-2 {
|
||
left: 16.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-push-3 {
|
||
left: 25%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-push-4 {
|
||
left: 33.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-push-5 {
|
||
left: 41.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-push-6 {
|
||
left: 50%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-push-7 {
|
||
left: 58.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-push-8 {
|
||
left: 66.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-push-9 {
|
||
left: 75%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-push-10 {
|
||
left: 83.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-push-11 {
|
||
left: 91.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-pull-1 {
|
||
right: 8.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-pull-2 {
|
||
right: 16.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-pull-3 {
|
||
right: 25%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-pull-4 {
|
||
right: 33.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-pull-5 {
|
||
right: 41.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-pull-6 {
|
||
right: 50%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-pull-7 {
|
||
right: 58.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-pull-8 {
|
||
right: 66.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-pull-9 {
|
||
right: 75%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-pull-10 {
|
||
right: 83.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-pull-11 {
|
||
right: 91.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-offset-1 {
|
||
margin-left: 8.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-offset-2 {
|
||
margin-left: 16.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-offset-3 {
|
||
margin-left: 25%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-offset-4 {
|
||
margin-left: 33.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-offset-5 {
|
||
margin-left: 41.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-offset-6 {
|
||
margin-left: 50%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-offset-7 {
|
||
margin-left: 58.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-offset-8 {
|
||
margin-left: 66.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-offset-9 {
|
||
margin-left: 75%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-offset-10 {
|
||
margin-left: 83.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-xs-offset-11 {
|
||
margin-left: 91.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.clamp-xs-18 > :nth-child(n+19) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-17 > :nth-child(n+18) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-16 > :nth-child(n+17) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-15 > :nth-child(n+16) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-14 > :nth-child(n+15) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-13 > :nth-child(n+14) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-12 > :nth-child(n+13) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-11 > :nth-child(n+12) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-10 > :nth-child(n+11) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-9 > :nth-child(n+10) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-8 > :nth-child(n+9) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-7 > :nth-child(n+8) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-6 > :nth-child(n+7) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-5 > :nth-child(n+6) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-4 > :nth-child(n+5) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-3 > :nth-child(n+4) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-2 > :nth-child(n+3) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-xs-1 > :nth-child(n+2) {
|
||
display: none;
|
||
}
|
||
|
||
body,
|
||
.container {
|
||
min-width: 360px;
|
||
}
|
||
|
||
/**
|
||
* Small Grid
|
||
*/
|
||
@media (min-width: 592px) {
|
||
body {
|
||
padding: 0;
|
||
}
|
||
body::before {
|
||
content: "sm";
|
||
}
|
||
|
||
.standard-grid > * {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
|
||
float: left;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-1 {
|
||
width: 8.3333333333%;
|
||
}
|
||
|
||
.col-sm-2 {
|
||
width: 16.6666666667%;
|
||
}
|
||
|
||
.col-sm-3 {
|
||
width: 25%;
|
||
}
|
||
|
||
.col-sm-4 {
|
||
width: 33.3333333333%;
|
||
}
|
||
|
||
.col-sm-5 {
|
||
width: 41.6666666667%;
|
||
}
|
||
|
||
.col-sm-6 {
|
||
width: 50%;
|
||
}
|
||
|
||
.col-sm-7 {
|
||
width: 58.3333333333%;
|
||
}
|
||
|
||
.col-sm-8 {
|
||
width: 66.6666666667%;
|
||
}
|
||
|
||
.col-sm-9 {
|
||
width: 75%;
|
||
}
|
||
|
||
.col-sm-10 {
|
||
width: 83.3333333333%;
|
||
}
|
||
|
||
.col-sm-11 {
|
||
width: 91.6666666667%;
|
||
}
|
||
|
||
.col-sm-12 {
|
||
width: 100%;
|
||
}
|
||
|
||
.col-sm-push-1 {
|
||
left: 8.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-push-2 {
|
||
left: 16.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-push-3 {
|
||
left: 25%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-push-4 {
|
||
left: 33.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-push-5 {
|
||
left: 41.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-push-6 {
|
||
left: 50%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-push-7 {
|
||
left: 58.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-push-8 {
|
||
left: 66.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-push-9 {
|
||
left: 75%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-push-10 {
|
||
left: 83.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-push-11 {
|
||
left: 91.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-pull-1 {
|
||
right: 8.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-pull-2 {
|
||
right: 16.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-pull-3 {
|
||
right: 25%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-pull-4 {
|
||
right: 33.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-pull-5 {
|
||
right: 41.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-pull-6 {
|
||
right: 50%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-pull-7 {
|
||
right: 58.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-pull-8 {
|
||
right: 66.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-pull-9 {
|
||
right: 75%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-pull-10 {
|
||
right: 83.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-pull-11 {
|
||
right: 91.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-offset-1 {
|
||
margin-left: 8.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-offset-2 {
|
||
margin-left: 16.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-offset-3 {
|
||
margin-left: 25%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-offset-4 {
|
||
margin-left: 33.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-offset-5 {
|
||
margin-left: 41.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-offset-6 {
|
||
margin-left: 50%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-offset-7 {
|
||
margin-left: 58.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-offset-8 {
|
||
margin-left: 66.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-offset-9 {
|
||
margin-left: 75%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-offset-10 {
|
||
margin-left: 83.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-sm-offset-11 {
|
||
margin-left: 91.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.clamp-xs-18 > :nth-child(n+19) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-17 > :nth-child(n+18) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-16 > :nth-child(n+17) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-15 > :nth-child(n+16) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-14 > :nth-child(n+15) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-13 > :nth-child(n+14) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-12 > :nth-child(n+13) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-11 > :nth-child(n+12) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-10 > :nth-child(n+11) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-9 > :nth-child(n+10) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-8 > :nth-child(n+9) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-7 > :nth-child(n+8) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-6 > :nth-child(n+7) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-5 > :nth-child(n+6) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-4 > :nth-child(n+5) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-3 > :nth-child(n+4) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-2 > :nth-child(n+3) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-xs-1 > :nth-child(n+2) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-18 > :nth-child(n+19) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-17 > :nth-child(n+18) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-16 > :nth-child(n+17) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-15 > :nth-child(n+16) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-14 > :nth-child(n+15) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-13 > :nth-child(n+14) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-12 > :nth-child(n+13) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-11 > :nth-child(n+12) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-10 > :nth-child(n+11) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-9 > :nth-child(n+10) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-8 > :nth-child(n+9) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-7 > :nth-child(n+8) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-6 > :nth-child(n+7) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-5 > :nth-child(n+6) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-4 > :nth-child(n+5) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-3 > :nth-child(n+4) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-2 > :nth-child(n+3) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-sm-1 > :nth-child(n+2) {
|
||
display: none;
|
||
}
|
||
}
|
||
/**
|
||
* Medium Grid
|
||
*/
|
||
@media (min-width: 820px) {
|
||
body {
|
||
padding: 0;
|
||
}
|
||
body::before {
|
||
content: "md";
|
||
}
|
||
|
||
.standard-grid > * {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
|
||
|
||
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
|
||
float: left;
|
||
}
|
||
|
||
|
||
|
||
.col-md-1 {
|
||
width: 8.3333333333%;
|
||
}
|
||
|
||
.col-md-2 {
|
||
width: 16.6666666667%;
|
||
}
|
||
|
||
.col-md-3 {
|
||
width: 25%;
|
||
}
|
||
|
||
.col-md-4 {
|
||
width: 33.3333333333%;
|
||
}
|
||
|
||
.col-md-5 {
|
||
width: 41.6666666667%;
|
||
}
|
||
|
||
.col-md-6 {
|
||
width: 50%;
|
||
}
|
||
|
||
.col-md-7 {
|
||
width: 58.3333333333%;
|
||
}
|
||
|
||
.col-md-8 {
|
||
width: 66.6666666667%;
|
||
}
|
||
|
||
.col-md-9 {
|
||
width: 75%;
|
||
}
|
||
|
||
.col-md-10 {
|
||
width: 83.3333333333%;
|
||
}
|
||
|
||
.col-md-11 {
|
||
width: 91.6666666667%;
|
||
}
|
||
|
||
.col-md-12 {
|
||
width: 100%;
|
||
}
|
||
|
||
.col-md-push-1 {
|
||
left: 8.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-push-2 {
|
||
left: 16.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-push-3 {
|
||
left: 25%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-push-4 {
|
||
left: 33.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-push-5 {
|
||
left: 41.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-push-6 {
|
||
left: 50%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-push-7 {
|
||
left: 58.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-push-8 {
|
||
left: 66.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-push-9 {
|
||
left: 75%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-push-10 {
|
||
left: 83.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-push-11 {
|
||
left: 91.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-pull-1 {
|
||
right: 8.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-pull-2 {
|
||
right: 16.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-pull-3 {
|
||
right: 25%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-pull-4 {
|
||
right: 33.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-pull-5 {
|
||
right: 41.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-pull-6 {
|
||
right: 50%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-pull-7 {
|
||
right: 58.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-pull-8 {
|
||
right: 66.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-pull-9 {
|
||
right: 75%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-pull-10 {
|
||
right: 83.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-pull-11 {
|
||
right: 91.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-offset-1 {
|
||
margin-left: 8.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-offset-2 {
|
||
margin-left: 16.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-offset-3 {
|
||
margin-left: 25%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-offset-4 {
|
||
margin-left: 33.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-offset-5 {
|
||
margin-left: 41.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-offset-6 {
|
||
margin-left: 50%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-offset-7 {
|
||
margin-left: 58.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-offset-8 {
|
||
margin-left: 66.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-offset-9 {
|
||
margin-left: 75%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-offset-10 {
|
||
margin-left: 83.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-md-offset-11 {
|
||
margin-left: 91.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.clamp-sm-18 > :nth-child(n+19) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-17 > :nth-child(n+18) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-16 > :nth-child(n+17) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-15 > :nth-child(n+16) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-14 > :nth-child(n+15) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-13 > :nth-child(n+14) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-12 > :nth-child(n+13) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-11 > :nth-child(n+12) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-10 > :nth-child(n+11) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-9 > :nth-child(n+10) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-8 > :nth-child(n+9) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-7 > :nth-child(n+8) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-6 > :nth-child(n+7) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-5 > :nth-child(n+6) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-4 > :nth-child(n+5) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-3 > :nth-child(n+4) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-2 > :nth-child(n+3) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-sm-1 > :nth-child(n+2) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-18 > :nth-child(n+19) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-17 > :nth-child(n+18) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-16 > :nth-child(n+17) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-15 > :nth-child(n+16) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-14 > :nth-child(n+15) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-13 > :nth-child(n+14) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-12 > :nth-child(n+13) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-11 > :nth-child(n+12) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-10 > :nth-child(n+11) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-9 > :nth-child(n+10) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-8 > :nth-child(n+9) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-7 > :nth-child(n+8) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-6 > :nth-child(n+7) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-5 > :nth-child(n+6) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-4 > :nth-child(n+5) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-3 > :nth-child(n+4) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-2 > :nth-child(n+3) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-md-1 > :nth-child(n+2) {
|
||
display: none;
|
||
}
|
||
}
|
||
/**
|
||
* Large Grid
|
||
*/
|
||
@media (min-width: 1280px) {
|
||
body {
|
||
padding: 0;
|
||
}
|
||
body::before {
|
||
content: "lg";
|
||
}
|
||
|
||
.standard-grid > * {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
|
||
padding-left: 12px;
|
||
padding-right: 12px;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
|
||
float: left;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-1 {
|
||
width: 8.3333333333%;
|
||
}
|
||
|
||
.col-lg-2 {
|
||
width: 16.6666666667%;
|
||
}
|
||
|
||
.col-lg-3 {
|
||
width: 25%;
|
||
}
|
||
|
||
.col-lg-4 {
|
||
width: 33.3333333333%;
|
||
}
|
||
|
||
.col-lg-5 {
|
||
width: 41.6666666667%;
|
||
}
|
||
|
||
.col-lg-6 {
|
||
width: 50%;
|
||
}
|
||
|
||
.col-lg-7 {
|
||
width: 58.3333333333%;
|
||
}
|
||
|
||
.col-lg-8 {
|
||
width: 66.6666666667%;
|
||
}
|
||
|
||
.col-lg-9 {
|
||
width: 75%;
|
||
}
|
||
|
||
.col-lg-10 {
|
||
width: 83.3333333333%;
|
||
}
|
||
|
||
.col-lg-11 {
|
||
width: 91.6666666667%;
|
||
}
|
||
|
||
.col-lg-12 {
|
||
width: 100%;
|
||
}
|
||
|
||
.col-lg-push-1 {
|
||
left: 8.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-push-2 {
|
||
left: 16.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-push-3 {
|
||
left: 25%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-push-4 {
|
||
left: 33.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-push-5 {
|
||
left: 41.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-push-6 {
|
||
left: 50%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-push-7 {
|
||
left: 58.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-push-8 {
|
||
left: 66.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-push-9 {
|
||
left: 75%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-push-10 {
|
||
left: 83.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-push-11 {
|
||
left: 91.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-pull-1 {
|
||
right: 8.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-pull-2 {
|
||
right: 16.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-pull-3 {
|
||
right: 25%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-pull-4 {
|
||
right: 33.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-pull-5 {
|
||
right: 41.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-pull-6 {
|
||
right: 50%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-pull-7 {
|
||
right: 58.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-pull-8 {
|
||
right: 66.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-pull-9 {
|
||
right: 75%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-pull-10 {
|
||
right: 83.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-pull-11 {
|
||
right: 91.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-offset-1 {
|
||
margin-left: 8.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-offset-2 {
|
||
margin-left: 16.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-offset-3 {
|
||
margin-left: 25%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-offset-4 {
|
||
margin-left: 33.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-offset-5 {
|
||
margin-left: 41.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-offset-6 {
|
||
margin-left: 50%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-offset-7 {
|
||
margin-left: 58.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-offset-8 {
|
||
margin-left: 66.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-offset-9 {
|
||
margin-left: 75%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-offset-10 {
|
||
margin-left: 83.3333333333%;
|
||
}
|
||
|
||
|
||
|
||
.col-lg-offset-11 {
|
||
margin-left: 91.6666666667%;
|
||
}
|
||
|
||
|
||
|
||
.clamp-md-18 > :nth-child(n+19) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-17 > :nth-child(n+18) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-16 > :nth-child(n+17) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-15 > :nth-child(n+16) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-14 > :nth-child(n+15) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-13 > :nth-child(n+14) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-12 > :nth-child(n+13) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-11 > :nth-child(n+12) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-10 > :nth-child(n+11) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-9 > :nth-child(n+10) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-8 > :nth-child(n+9) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-7 > :nth-child(n+8) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-6 > :nth-child(n+7) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-5 > :nth-child(n+6) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-4 > :nth-child(n+5) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-3 > :nth-child(n+4) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-2 > :nth-child(n+3) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-md-1 > :nth-child(n+2) {
|
||
display: block;
|
||
}
|
||
|
||
.clamp-lg-18 > :nth-child(n+19) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-17 > :nth-child(n+18) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-16 > :nth-child(n+17) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-15 > :nth-child(n+16) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-14 > :nth-child(n+15) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-13 > :nth-child(n+14) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-12 > :nth-child(n+13) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-11 > :nth-child(n+12) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-10 > :nth-child(n+11) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-9 > :nth-child(n+10) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-8 > :nth-child(n+9) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-7 > :nth-child(n+8) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-6 > :nth-child(n+7) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-5 > :nth-child(n+6) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-4 > :nth-child(n+5) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-3 > :nth-child(n+4) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-2 > :nth-child(n+3) {
|
||
display: none;
|
||
}
|
||
|
||
.clamp-lg-1 > :nth-child(n+2) {
|
||
display: none;
|
||
}
|
||
}
|
||
/**
|
||
* Grid Overlay
|
||
*/
|
||
.grid-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: 9999;
|
||
pointer-events: none;
|
||
}
|
||
.grid-overlay {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.grid-overlay.grid-overlay-baseline {
|
||
background-size: 100% 8px;
|
||
}
|
||
|
||
.grid-overlay-baseline-highlight {
|
||
position: absolute;
|
||
top: 0;
|
||
height: 1px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.grid-overlay-baseline-highlight {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
|
||
|
||
.grid-overlay-row {
|
||
height: 100%;
|
||
}
|
||
|
||
.grid-overlay-col-1,
|
||
.grid-overlay-col-2,
|
||
.grid-overlay-col-3,
|
||
.grid-overlay-col-4,
|
||
.grid-overlay-col-5,
|
||
.grid-overlay-col-6,
|
||
.grid-overlay-col-7,
|
||
.grid-overlay-col-8,
|
||
.grid-overlay-col-9,
|
||
.grid-overlay-col-10,
|
||
.grid-overlay-col-11,
|
||
.grid-overlay-col-12 {
|
||
height: 100%;
|
||
}
|
||
|
||
.grid-overlay-col-1, .grid-overlay-col-2, .grid-overlay-col-3, .grid-overlay-col-4, .grid-overlay-col-5, .grid-overlay-col-6, .grid-overlay-col-7, .grid-overlay-col-8, .grid-overlay-col-9, .grid-overlay-col-10, .grid-overlay-col-11, .grid-overlay-col-12 {
|
||
background-clip: content-box;
|
||
}
|
||
|
||
.grid-overlay-label {
|
||
position: fixed;
|
||
top: 48px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.grid-overlay-label {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
padding: 5px 10px;
|
||
}
|
||
|
||
.grid-overlay-label {
|
||
right: 0;
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* Spoticons
|
||
*
|
||
* Variable Set: Spoticons
|
||
*
|
||
* Styleguide 1.2.1
|
||
*/
|
||
@font-face {
|
||
font-family: "glue-spoticon";
|
||
src: url("https://local_resource_host/fonts/spoticon_cb67241fb50eae02396ee4647eb9a2e6.ttf") format("truetype");
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
}
|
||
[class^=spoticon-]::before,
|
||
[class*=" spoticon-"]::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
display: inline-block;
|
||
text-decoration: inherit;
|
||
}
|
||
|
||
.spoticon-add-to-playlist-16::before {
|
||
content: "\f164";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-add-to-playlist-24::before {
|
||
content: "\f3AC";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-add-to-playlist-32::before {
|
||
content: "\f165";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-add-to-playlist-48::before {
|
||
content: "\f40A";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-add-to-queue-16::before {
|
||
content: "\f1BD";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-add-to-queue-24::before {
|
||
content: "\f3B7";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-add-to-queue-32::before {
|
||
content: "\f1BE";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-add-to-queue-48::before {
|
||
content: "\f40B";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-add-to-queue-64::before {
|
||
content: "\f1BF";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-addfollow-16::before {
|
||
content: "\f1E5";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-addfollow-24::before {
|
||
content: "\f3BA";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-addfollow-32::before {
|
||
content: "\f1E6";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-addfollow-48::before {
|
||
content: "\f40C";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-addfollow-64::before {
|
||
content: "\f1F5";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-addfollowers-16::before {
|
||
content: "\f22F";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-addfollowers-24::before {
|
||
content: "\f3C4";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-addfollowers-32::before {
|
||
content: "\f230";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-addfollowers-64::before {
|
||
content: "\f231";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-addsuggestedsong-16::before {
|
||
content: "\f22C";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-addsuggestedsong-24::before {
|
||
content: "\f48b";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-addsuggestedsong-32::before {
|
||
content: "\f22D";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-addsuggestedsong-48::before {
|
||
content: "\f48d";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-addsuggestedsong-64::before {
|
||
content: "\f22E";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-airplay-16::before {
|
||
content: "\f277";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-airplay-32::before {
|
||
content: "\f278";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-album-16::before {
|
||
content: "\f100";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-album-24::before {
|
||
content: "\f391";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-album-32::before {
|
||
content: "\f101";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-album-48::before {
|
||
content: "\f40D";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-album-64::before {
|
||
content: "\f167";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-album-contained-16::before {
|
||
content: "\f1C0";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-album-contained-32::before {
|
||
content: "\f1C1";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-album-contained-64::before {
|
||
content: "\f1C2";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-arrow-down-16::before {
|
||
content: "\f1DF";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-arrow-down-24::before {
|
||
content: "\f3B1";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-arrow-down-32::before {
|
||
content: "\f1E0";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-arrow-down-48::before {
|
||
content: "\f40E";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-arrow-down-64::before {
|
||
content: "\f1E1";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-arrow-left-16::before {
|
||
content: "\f183";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-arrow-left-24::before {
|
||
content: "\f3AE";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-arrow-left-32::before {
|
||
content: "\f184";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-arrow-left-48::before {
|
||
content: "\f40F";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-arrow-left-64::before {
|
||
content: "\f185";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-arrow-right-16::before {
|
||
content: "\f186";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-arrow-right-24::before {
|
||
content: "\f3AF";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-arrow-right-32::before {
|
||
content: "\f187";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-arrow-right-48::before {
|
||
content: "\f410";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-arrow-right-64::before {
|
||
content: "\f188";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-arrow-up-16::before {
|
||
content: "\f1DC";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-arrow-up-24::before {
|
||
content: "\f3B0";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-arrow-up-32::before {
|
||
content: "\f1DD";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-arrow-up-48::before {
|
||
content: "\f411";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-arrow-up-64::before {
|
||
content: "\f1DE";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-artist-16::before {
|
||
content: "\f102";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-artist-24::before {
|
||
content: "\f392";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-artist-32::before {
|
||
content: "\f103";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-artist-48::before {
|
||
content: "\f412";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-artist-64::before {
|
||
content: "\f168";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-artist-active-16::before {
|
||
content: "\f361";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-artist-active-24::before {
|
||
content: "\f362";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-artist-active-32::before {
|
||
content: "\f363";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-artist-active-48::before {
|
||
content: "\f413";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-artist-active-64::before {
|
||
content: "\f364";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-attach-16::before {
|
||
content: "\f104";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-attach-24::before {
|
||
content: "\f4a1";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-attach-32::before {
|
||
content: "\f105";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-attach-48::before {
|
||
content: "\f4a2";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-attach-64::before {
|
||
content: "\f4a3";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-available-offline-16::before {
|
||
content: "\f365";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-available-offline-24::before {
|
||
content: "\f366";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-available-offline-32::before {
|
||
content: "\f367";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-available-offline-48::before {
|
||
content: "\f414";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-available-offline-64::before {
|
||
content: "\f368";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-ban-16::before {
|
||
content: "\f31E";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-ban-32::before {
|
||
content: "\f31D";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-ban-48::before {
|
||
content: "\f415";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-ban-active-16::before {
|
||
content: "\f324";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-ban-active-32::before {
|
||
content: "\f323";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-ban-active-48::before {
|
||
content: "\f416";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-block-16::before {
|
||
content: "\f106";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-block-24::before {
|
||
content: "\f49f";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-block-32::before {
|
||
content: "\f107";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-block-48::before {
|
||
content: "\f4a0";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-block-64::before {
|
||
content: "\f169";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-bluetooth-16::before {
|
||
content: "\f494";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-bluetooth-24::before {
|
||
content: "\f495";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-bluetooth-32::before {
|
||
content: "\f496";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-bluetooth-48::before {
|
||
content: "\f497";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-bluetooth-64::before {
|
||
content: "\f498";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-browse-16::before {
|
||
content: "\f108";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-browse-24::before {
|
||
content: "\f393";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-browse-32::before {
|
||
content: "\f109";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-browse-48::before {
|
||
content: "\f417";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-browse-64::before {
|
||
content: "\f16A";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-browse-active-16::before {
|
||
content: "\f369";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-browse-active-24::before {
|
||
content: "\f36A";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-browse-active-32::before {
|
||
content: "\f36B";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-browse-active-48::before {
|
||
content: "\f418";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-browse-active-64::before {
|
||
content: "\f36C";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-camera-16::before {
|
||
content: "\f265";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-camera-24::before {
|
||
content: "\f3CA";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-camera-32::before {
|
||
content: "\f266";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-camera-48::before {
|
||
content: "\f419";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-camera-64::before {
|
||
content: "\f3E4";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-carplay-16::before {
|
||
content: "\f271";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-carplay-32::before {
|
||
content: "\f272";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-chart-down-16::before {
|
||
content: "\f25E";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-chart-down-24::before {
|
||
content: "\f3C8";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-chart-down-32::before {
|
||
content: "\f25F";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-chart-down-48::before {
|
||
content: "\f41A";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-chart-down-64::before {
|
||
content: "\f3E6";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-chart-new-16::before {
|
||
content: "\f25B";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-chart-new-32::before {
|
||
content: "\f25C";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-chart-up-16::before {
|
||
content: "\f262";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-chart-up-24::before {
|
||
content: "\f3C9";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-chart-up-32::before {
|
||
content: "\f263";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-chart-up-48::before {
|
||
content: "\f41B";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-chart-up-64::before {
|
||
content: "\f3E5";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-check-16::before {
|
||
content: "\f10a";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-check-24::before {
|
||
content: "\f1C9";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-check-32::before {
|
||
content: "\f10b";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-check-48::before {
|
||
content: "\f41C";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-check-64::before {
|
||
content: "\f16B";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-check-alt-16::before {
|
||
content: "\f34D";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-check-alt-24::before {
|
||
content: "\f34E";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-check-alt-32::before {
|
||
content: "\f34F";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-check-alt-48::before {
|
||
content: "\f41D";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-check-alt-64::before {
|
||
content: "\f350";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-check-alt-fill-16::before {
|
||
content: "\f4ec";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-check-alt-fill-24::before {
|
||
content: "\f4ed";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-check-alt-fill-32::before {
|
||
content: "\f4ee";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-check-alt-fill-48::before {
|
||
content: "\f4ef";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-check-alt-fill-64::before {
|
||
content: "\f4f0";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-chevron-down-16::before {
|
||
content: "\f10c";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-chevron-down-24::before {
|
||
content: "\f394";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-chevron-down-32::before {
|
||
content: "\f10d";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-chevron-down-48::before {
|
||
content: "\f41E";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-chevron-down-64::before {
|
||
content: "\f16C";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-chevron-left-16::before {
|
||
content: "\f10e";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-chevron-left-24::before {
|
||
content: "\f395";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-chevron-left-32::before {
|
||
content: "\f10f";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-chevron-left-48::before {
|
||
content: "\f41F";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-chevron-left-64::before {
|
||
content: "\f16D";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-chevron-right-16::before {
|
||
content: "\f110";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-chevron-right-24::before {
|
||
content: "\f396";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-chevron-right-32::before {
|
||
content: "\f111";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-chevron-right-48::before {
|
||
content: "\f420";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-chevron-right-64::before {
|
||
content: "\f16E";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-chevron-up-16::before {
|
||
content: "\f112";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-chevron-up-24::before {
|
||
content: "\f397";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-chevron-up-32::before {
|
||
content: "\f113";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-chevron-up-48::before {
|
||
content: "\f421";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-chevron-up-64::before {
|
||
content: "\f16F";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-chromecast-connected-16::before {
|
||
content: "\f30B";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-chromecast-connected-32::before {
|
||
content: "\f30C";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-chromecast-connecting-one-16::before {
|
||
content: "\f30D";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-chromecast-connecting-one-32::before {
|
||
content: "\f30E";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-chromecast-connecting-three-16::before {
|
||
content: "\f311";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-chromecast-connecting-three-32::before {
|
||
content: "\f312";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-chromecast-connecting-two-16::before {
|
||
content: "\f30F";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-chromecast-connecting-two-32::before {
|
||
content: "\f310";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-chromecast-disconnected-16::before {
|
||
content: "\f309";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-chromecast-disconnected-32::before {
|
||
content: "\f30A";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-collaborative-playlist-16::before {
|
||
content: "\f114";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-collaborative-playlist-24::before {
|
||
content: "\f499";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-collaborative-playlist-32::before {
|
||
content: "\f115";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-collaborative-playlist-48::before {
|
||
content: "\f49a";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-collaborative-playlist-64::before {
|
||
content: "\f170";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-collection-16::before {
|
||
content: "\f116";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-collection-24::before {
|
||
content: "\f398";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-collection-32::before {
|
||
content: "\f117";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-collection-48::before {
|
||
content: "\f422";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-collection-64::before {
|
||
content: "\f171";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-collection-active-16::before {
|
||
content: "\f379";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-collection-active-24::before {
|
||
content: "\f37A";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-collection-active-32::before {
|
||
content: "\f37B";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-collection-active-48::before {
|
||
content: "\f423";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-collection-active-64::before {
|
||
content: "\f37C";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-connect-to-devices-16::before {
|
||
content: "\f328";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-connect-to-devices-24::before {
|
||
content: "\f3DE";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-connect-to-devices-32::before {
|
||
content: "\f327";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-connect-to-devices-48::before {
|
||
content: "\f424";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-connect-to-devices-64::before {
|
||
content: "\f3E7";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-copy-16::before {
|
||
content: "\f389";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-copy-24::before {
|
||
content: "\f38A";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-copy-32::before {
|
||
content: "\f38B";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-copy-48::before {
|
||
content: "\f425";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-copy-64::before {
|
||
content: "\f38C";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-destination-pin-16::before {
|
||
content: "\f32D";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-destination-pin-24::before {
|
||
content: "\f32E";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-destination-pin-32::before {
|
||
content: "\f32F";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-destination-pin-48::before {
|
||
content: "\f426";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-destination-pin-64::before {
|
||
content: "\f330";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-device-arm-16::before {
|
||
content: "\f305";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-device-arm-24::before {
|
||
content: "\f3D5";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-device-arm-32::before {
|
||
content: "\f306";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-device-arm-48::before {
|
||
content: "\f427";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-device-arm-64::before {
|
||
content: "\f3E8";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-device-car-16::before {
|
||
content: "\f317";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-device-car-24::before {
|
||
content: "\f3D8";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-device-car-32::before {
|
||
content: "\f318";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-device-car-48::before {
|
||
content: "\f428";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-device-car-64::before {
|
||
content: "\f401";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-device-computer-16::before {
|
||
content: "\f29B";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-device-computer-24::before {
|
||
content: "\f3D0";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-device-computer-32::before {
|
||
content: "\f29C";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-device-computer-48::before {
|
||
content: "\f429";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-device-computer-64::before {
|
||
content: "\f3E9";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-device-mobile-16::before {
|
||
content: "\f301";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-device-mobile-24::before {
|
||
content: "\f3D3";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-device-mobile-32::before {
|
||
content: "\f302";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-device-mobile-48::before {
|
||
content: "\f42A";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-device-mobile-64::before {
|
||
content: "\f3EA";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-device-multispeaker-16::before {
|
||
content: "\f315";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-device-multispeaker-24::before {
|
||
content: "\f3D7";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-device-multispeaker-32::before {
|
||
content: "\f316";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-device-multispeaker-48::before {
|
||
content: "\f42B";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-device-multispeaker-64::before {
|
||
content: "\f3EB";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-device-other-16::before {
|
||
content: "\f29F";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-device-other-24::before {
|
||
content: "\f3D2";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-device-other-32::before {
|
||
content: "\f300";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-device-other-48::before {
|
||
content: "\f42C";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-device-other-64::before {
|
||
content: "\f3EC";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-device-speaker-16::before {
|
||
content: "\f29D";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-device-speaker-24::before {
|
||
content: "\f3D1";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-device-speaker-32::before {
|
||
content: "\f29E";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-device-speaker-48::before {
|
||
content: "\f42D";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-device-speaker-64::before {
|
||
content: "\f3ED";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-device-tablet-16::before {
|
||
content: "\f303";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-device-tablet-24::before {
|
||
content: "\f3D4";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-device-tablet-32::before {
|
||
content: "\f304";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-device-tablet-48::before {
|
||
content: "\f42E";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-device-tablet-64::before {
|
||
content: "\f3EE";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-device-tv-16::before {
|
||
content: "\f307";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-device-tv-24::before {
|
||
content: "\f3D6";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-device-tv-32::before {
|
||
content: "\f308";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-device-tv-48::before {
|
||
content: "\f42F";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-device-tv-64::before {
|
||
content: "\f3EF";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-devices-16::before {
|
||
content: "\f213";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-devices-24::before {
|
||
content: "\f3BE";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-devices-32::before {
|
||
content: "\f214";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-devices-48::before {
|
||
content: "\f430";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-devices-64::before {
|
||
content: "\f215";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-devices-alt-16::before {
|
||
content: "\f385";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-devices-alt-24::before {
|
||
content: "\f386";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-devices-alt-32::before {
|
||
content: "\f387";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-devices-alt-48::before {
|
||
content: "\f431";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-devices-alt-64::before {
|
||
content: "\f388";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-discover-16::before {
|
||
content: "\f172";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-discover-24::before {
|
||
content: "\f3AD";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-discover-32::before {
|
||
content: "\f173";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-discover-48::before {
|
||
content: "\f432";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-discover-64::before {
|
||
content: "\f174";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-download-16::before {
|
||
content: "\f11a";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-download-24::before {
|
||
content: "\f399";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-download-32::before {
|
||
content: "\f11b";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-download-48::before {
|
||
content: "\f433";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-download-64::before {
|
||
content: "\f1B2";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-downloaded-16::before {
|
||
content: "\f32C";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-downloaded-24::before {
|
||
content: "\f3DF";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-downloaded-32::before {
|
||
content: "\f32B";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-downloaded-48::before {
|
||
content: "\f434";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-downloaded-64::before {
|
||
content: "\f3F0";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-drag-and-drop-16::before {
|
||
content: "\f331";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-drag-and-drop-24::before {
|
||
content: "\f332";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-drag-and-drop-32::before {
|
||
content: "\f333";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-drag-and-drop-48::before {
|
||
content: "\f435";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-drag-and-drop-64::before {
|
||
content: "\f334";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-edit-16::before {
|
||
content: "\f1E2";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-edit-24::before {
|
||
content: "\f3B9";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-edit-32::before {
|
||
content: "\f1E3";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-edit-48::before {
|
||
content: "\f436";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-edit-64::before {
|
||
content: "\f1E4";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-email-16::before {
|
||
content: "\f1E7";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-email-24::before {
|
||
content: "\f49d";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-email-32::before {
|
||
content: "\f1E8";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-email-48::before {
|
||
content: "\f49e";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-email-64::before {
|
||
content: "\f1F6";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-events-16::before {
|
||
content: "\f1B3";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-events-24::before {
|
||
content: "\f3B4";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-events-32::before {
|
||
content: "\f1B4";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-events-48::before {
|
||
content: "\f437";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-events-64::before {
|
||
content: "\f1B5";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-exclamation-circle-16::before {
|
||
content: "\f4f1";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-exclamation-circle-24::before {
|
||
content: "\f4f2";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-exclamation-circle-32::before {
|
||
content: "\f4f3";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-exclamation-circle-48::before {
|
||
content: "\f4f4";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-exclamation-circle-64::before {
|
||
content: "\f4f5";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-facebook-16::before {
|
||
content: "\f1E9";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-facebook-32::before {
|
||
content: "\f1EA";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-facebook-64::before {
|
||
content: "\f1F7";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-facebook-messenger-16::before {
|
||
content: "\f313";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-facebook-messenger-32::before {
|
||
content: "\f314";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-filter-16::before {
|
||
content: "\f11c";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-filter-24::before {
|
||
content: "\f39A";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-filter-32::before {
|
||
content: "\f11d";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-filter-48::before {
|
||
content: "\f438";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-filter-64::before {
|
||
content: "\f3F1";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-flag-16::before {
|
||
content: "\f11e";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-flag-24::before {
|
||
content: "\f49b";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-flag-32::before {
|
||
content: "\f11f";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-flag-48::before {
|
||
content: "\f49c";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-flag-64::before {
|
||
content: "\f175";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-follow-16::before {
|
||
content: "\f120";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-follow-24::before {
|
||
content: "\f39B";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-follow-32::before {
|
||
content: "\f121";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-follow-48::before {
|
||
content: "\f439";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-follow-64::before {
|
||
content: "\f176";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-follow-active-16::before {
|
||
content: "\f4fb";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-follow-active-24::before {
|
||
content: "\f4fc";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-follow-active-32::before {
|
||
content: "\f4fd";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-follow-active-48::before {
|
||
content: "\f4fe";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-follow-active-64::before {
|
||
content: "\f4ff";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-fullscreen-16::before {
|
||
content: "\f28C";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-fullscreen-24::before {
|
||
content: "\f3CE";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-fullscreen-32::before {
|
||
content: "\f28D";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-fullscreen-48::before {
|
||
content: "\f43A";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-fullscreen-64::before {
|
||
content: "\f3F2";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-games-console-16::before {
|
||
content: "\f253";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-games-console-24::before {
|
||
content: "\f3C6";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-games-console-32::before {
|
||
content: "\f254";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-games-console-48::before {
|
||
content: "\f43B";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-games-console-64::before {
|
||
content: "\f3F3";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-gears-16::before {
|
||
content: "\f122";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-gears-24::before {
|
||
content: "\f39C";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-gears-32::before {
|
||
content: "\f123";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-gears-48::before {
|
||
content: "\f43C";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-gears-64::before {
|
||
content: "\f177";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-googleplus-16::before {
|
||
content: "\f244";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-googleplus-32::before {
|
||
content: "\f245";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-grid-view-16::before {
|
||
content: "\f178";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-grid-view-24::before {
|
||
content: "\f1CA";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-grid-view-32::before {
|
||
content: "\f179";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-grid-view-48::before {
|
||
content: "\f43D";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-grid-view-64::before {
|
||
content: "\f17A";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-headphones-16::before {
|
||
content: "\f335";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-headphones-24::before {
|
||
content: "\f336";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-headphones-32::before {
|
||
content: "\f337";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-headphones-48::before {
|
||
content: "\f43E";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-headphones-64::before {
|
||
content: "\f338";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-heart-16::before {
|
||
content: "\f320";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-heart-24::before {
|
||
content: "\f3DB";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-heart-32::before {
|
||
content: "\f31F";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-heart-48::before {
|
||
content: "\f43F";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-heart-64::before {
|
||
content: "\f3F4";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-heart-active-16::before {
|
||
content: "\f322";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-heart-active-24::before {
|
||
content: "\f3DC";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-heart-active-32::before {
|
||
content: "\f321";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-heart-active-48::before {
|
||
content: "\f440";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-heart-active-64::before {
|
||
content: "\f3F5";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-helpcircle-16::before {
|
||
content: "\f23B";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-helpcircle-24::before {
|
||
content: "\f39E";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-helpcircle-32::before {
|
||
content: "\f23C";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-helpcircle-48::before {
|
||
content: "\f441";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-highlight-16::before {
|
||
content: "\f247";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-highlight-32::before {
|
||
content: "\f248";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-home-16::before {
|
||
content: "\f1B6";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-home-24::before {
|
||
content: "\f3B5";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-home-32::before {
|
||
content: "\f1B7";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-home-48::before {
|
||
content: "\f442";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-home-64::before {
|
||
content: "\f1B8";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-home-active-16::before {
|
||
content: "\f36D";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-home-active-24::before {
|
||
content: "\f36E";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-home-active-32::before {
|
||
content: "\f36F";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-home-active-48::before {
|
||
content: "\f443";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-home-active-64::before {
|
||
content: "\f370";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-inbox-16::before {
|
||
content: "\f124";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-inbox-24::before {
|
||
content: "\f39D";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-inbox-32::before {
|
||
content: "\f125";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-inbox-48::before {
|
||
content: "\f444";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-inbox-64::before {
|
||
content: "\f17B";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-info-16::before {
|
||
content: "\f126";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-info-32::before {
|
||
content: "\f127";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-instagram-16::before {
|
||
content: "\f4e7";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-instagram-24::before {
|
||
content: "\f4e8";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-instagram-32::before {
|
||
content: "\f4e9";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-instagram-48::before {
|
||
content: "\f4ea";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-instagram-64::before {
|
||
content: "\f4eb";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-library-16::before {
|
||
content: "\f20A";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-library-32::before {
|
||
content: "\f20B";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-library-64::before {
|
||
content: "\f20C";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-lightning-16::before {
|
||
content: "\f4ba";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-lightning-24::before {
|
||
content: "\f4bb";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-lightning-32::before {
|
||
content: "\f4bc";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-lightning-48::before {
|
||
content: "\f4bd";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-lightning-64::before {
|
||
content: "\f4be";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-line-16::before {
|
||
content: "\f319";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-line-32::before {
|
||
content: "\f31A";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-list-view-16::before {
|
||
content: "\f17C";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-list-view-24::before {
|
||
content: "\f1CB";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-list-view-32::before {
|
||
content: "\f17D";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-list-view-48::before {
|
||
content: "\f445";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-list-view-64::before {
|
||
content: "\f17E";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-localfile-16::before {
|
||
content: "\f1FA";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-localfile-24::before {
|
||
content: "\f3BC";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-localfile-32::before {
|
||
content: "\f1FB";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-localfile-48::before {
|
||
content: "\f446";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-localfile-64::before {
|
||
content: "\f1FC";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-locked-16::before {
|
||
content: "\f128";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-locked-24::before {
|
||
content: "\f39F";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-locked-32::before {
|
||
content: "\f129";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-locked-48::before {
|
||
content: "\f447";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-locked-64::before {
|
||
content: "\f17F";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-locked-active-16::before {
|
||
content: "\f4b5";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-locked-active-24::before {
|
||
content: "\f4b6";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-locked-active-32::before {
|
||
content: "\f4b7";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-locked-active-48::before {
|
||
content: "\f4b8";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-locked-active-64::before {
|
||
content: "\f4b9";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-lyrics-16::before {
|
||
content: "\f32A";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-lyrics-24::before {
|
||
content: "\f339";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-lyrics-32::before {
|
||
content: "\f329";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-lyrics-48::before {
|
||
content: "\f448";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-lyrics-64::before {
|
||
content: "\f33A";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-make-available-offline-48::before {
|
||
content: "\f449";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-make—available-offline-16::before {
|
||
content: "\f33D";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-make—available-offline-24::before {
|
||
content: "\f33E";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-make—available-offline-32::before {
|
||
content: "\f33F";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-make—available-offline-64::before {
|
||
content: "\f340";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-me-alt-48::before {
|
||
content: "\f44A";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-me-alt-active-48::before {
|
||
content: "\f44B";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-menu-16::before {
|
||
content: "\f1FD";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-menu-24::before {
|
||
content: "\f3BD";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-menu-32::before {
|
||
content: "\f1FE";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-menu-48::before {
|
||
content: "\f44C";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-menu-64::before {
|
||
content: "\f1FF";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-messages-16::before {
|
||
content: "\f12a";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-messages-24::before {
|
||
content: "\f3A0";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-messages-32::before {
|
||
content: "\f12b";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-messages-48::before {
|
||
content: "\f44D";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-messages-64::before {
|
||
content: "\f180";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-mic-16::before {
|
||
content: "\f341";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-mic-24::before {
|
||
content: "\f342";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-mic-32::before {
|
||
content: "\f343";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-mic-48::before {
|
||
content: "\f44E";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-mic-64::before {
|
||
content: "\f344";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-minimise-16::before {
|
||
content: "\f268";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-minimise-24::before {
|
||
content: "\f3CB";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-minimise-32::before {
|
||
content: "\f269";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-minimise-48::before {
|
||
content: "\f44F";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-minimise-64::before {
|
||
content: "\f3F6";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-mix-16::before {
|
||
content: "\f326";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-mix-24::before {
|
||
content: "\f3DD";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-mix-32::before {
|
||
content: "\f325";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-mix-48::before {
|
||
content: "\f450";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-mix-64::before {
|
||
content: "\f3F7";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-more-16::before {
|
||
content: "\f12c";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-more-24::before {
|
||
content: "\f1CC";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-more-32::before {
|
||
content: "\f12d";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-more-48::before {
|
||
content: "\f451";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-more-64::before {
|
||
content: "\f181";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-more-alt-48::before {
|
||
content: "\f452";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-more-android-16::before {
|
||
content: "\f219";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-more-android-24::before {
|
||
content: "\f21A";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-more-android-32::before {
|
||
content: "\f21B";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-more-android-48::before {
|
||
content: "\f48a";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-more-android-64::before {
|
||
content: "\f21C";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-new-spotify-connect-16::before {
|
||
content: "\f1CD";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-new-spotify-connect-24::before {
|
||
content: "\f3B8";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-new-spotify-connect-32::before {
|
||
content: "\f1CE";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-new-spotify-connect-64::before {
|
||
content: "\f1CF";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-new-volume-16::before {
|
||
content: "\f1D0";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-new-volume-24::before {
|
||
content: "\f1D1";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-newradio-16::before {
|
||
content: "\f220";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-newradio-24::before {
|
||
content: "\f3C0";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-newradio-32::before {
|
||
content: "\f221";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-newradio-48::before {
|
||
content: "\f453";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-newradio-64::before {
|
||
content: "\f222";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-nikeplus-16::before {
|
||
content: "\f274";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-nikeplus-32::before {
|
||
content: "\f275";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-notifications-16::before {
|
||
content: "\f12e";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-notifications-24::before {
|
||
content: "\f3A1";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-notifications-32::before {
|
||
content: "\f12f";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-notifications-48::before {
|
||
content: "\f454";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-notifications-64::before {
|
||
content: "\f182";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-now-playing-16::before {
|
||
content: "\f345";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-now-playing-24::before {
|
||
content: "\f346";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-now-playing-32::before {
|
||
content: "\f347";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-now-playing-48::before {
|
||
content: "\f455";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-now-playing-64::before {
|
||
content: "\f348";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-now-playing-active-16::before {
|
||
content: "\f37D";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-now-playing-active-24::before {
|
||
content: "\f37E";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-now-playing-active-32::before {
|
||
content: "\f37F";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-now-playing-active-48::before {
|
||
content: "\f456";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-now-playing-active-64::before {
|
||
content: "\f380";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-offline-16::before {
|
||
content: "\f21D";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-offline-24::before {
|
||
content: "\f3BF";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-offline-32::before {
|
||
content: "\f21E";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-offline-48::before {
|
||
content: "\f457";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-offline-64::before {
|
||
content: "\f21F";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-offline-sync-16::before {
|
||
content: "\f1B9";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-offline-sync-24::before {
|
||
content: "\f3B6";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-offline-sync-32::before {
|
||
content: "\f1BA";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-offline-sync-48::before {
|
||
content: "\f458";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-offline-sync-64::before {
|
||
content: "\f1BB";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-pause-16::before {
|
||
content: "\f130";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-pause-24::before {
|
||
content: "\f1D3";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-pause-32::before {
|
||
content: "\f131";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-pause-48::before {
|
||
content: "\f459";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-pause-64::before {
|
||
content: "\f189";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-payment-16::before {
|
||
content: "\f241";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-payment-32::before {
|
||
content: "\f242";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-paymenthistory-16::before {
|
||
content: "\f24A";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-paymenthistory-32::before {
|
||
content: "\f24B";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-play-16::before {
|
||
content: "\f132";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-play-24::before {
|
||
content: "\f1C8";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-play-32::before {
|
||
content: "\f133";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-play-48::before {
|
||
content: "\f45A";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-play-64::before {
|
||
content: "\f18A";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-playback-speed-0point5x-16::before {
|
||
content: "\f4c4";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-playback-speed-0point5x-24::before {
|
||
content: "\f4c5";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-playback-speed-0point5x-32::before {
|
||
content: "\f4c6";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-playback-speed-0point5x-48::before {
|
||
content: "\f4c7";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-playback-speed-0point5x-64::before {
|
||
content: "\f4c8";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-playback-speed-0point8x-16::before {
|
||
content: "\f4c9";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-playback-speed-0point8x-24::before {
|
||
content: "\f4ca";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-playback-speed-0point8x-32::before {
|
||
content: "\f4cb";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-playback-speed-0point8x-48::before {
|
||
content: "\f4cc";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-playback-speed-0point8x-64::before {
|
||
content: "\f4cd";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1point2x-16::before {
|
||
content: "\f4d3";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1point2x-24::before {
|
||
content: "\f4d4";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1point2x-32::before {
|
||
content: "\f4d5";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1point2x-48::before {
|
||
content: "\f4d6";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1point2x-64::before {
|
||
content: "\f4d7";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1point5x-16::before {
|
||
content: "\f4d8";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1point5x-24::before {
|
||
content: "\f4d9";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1point5x-32::before {
|
||
content: "\f4da";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1point5x-48::before {
|
||
content: "\f4db";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1point5x-64::before {
|
||
content: "\f4dc";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1x-16::before {
|
||
content: "\f4ce";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1x-24::before {
|
||
content: "\f4cf";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1x-32::before {
|
||
content: "\f4d0";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1x-48::before {
|
||
content: "\f4d1";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-playback-speed-1x-64::before {
|
||
content: "\f4d2";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-playback-speed-2x-16::before {
|
||
content: "\f4dd";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-playback-speed-2x-24::before {
|
||
content: "\f4de";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-playback-speed-2x-32::before {
|
||
content: "\f4df";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-playback-speed-2x-48::before {
|
||
content: "\f4e0";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-playback-speed-2x-64::before {
|
||
content: "\f4e1";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-playback-speed-3x-16::before {
|
||
content: "\f4e2";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-playback-speed-3x-24::before {
|
||
content: "\f4e3";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-playback-speed-3x-32::before {
|
||
content: "\f4e4";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-playback-speed-3x-48::before {
|
||
content: "\f4e5";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-playback-speed-3x-64::before {
|
||
content: "\f4e6";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-playlist-16::before {
|
||
content: "\f134";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-playlist-24::before {
|
||
content: "\f3A2";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-playlist-32::before {
|
||
content: "\f135";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-playlist-48::before {
|
||
content: "\f45B";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-playlist-64::before {
|
||
content: "\f18E";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-playlist-folder-16::before {
|
||
content: "\f136";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-playlist-folder-24::before {
|
||
content: "\f4a4";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-playlist-folder-32::before {
|
||
content: "\f137";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-playlist-folder-48::before {
|
||
content: "\f4a5";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-playlist-folder-64::before {
|
||
content: "\f1C3";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-plus-16::before {
|
||
content: "\f138";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-plus-24::before {
|
||
content: "\f1C6";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-plus-2px-16::before {
|
||
content: "\f15b";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-plus-2px-24::before {
|
||
content: "\f162";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-plus-2px-32::before {
|
||
content: "\f163";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-plus-32::before {
|
||
content: "\f139";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-plus-48::before {
|
||
content: "\f45C";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-plus-64::before {
|
||
content: "\f18F";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-plus-alt-16::before {
|
||
content: "\f349";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-plus-alt-24::before {
|
||
content: "\f34A";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-plus-alt-32::before {
|
||
content: "\f34B";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-plus-alt-48::before {
|
||
content: "\f45D";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-plus-alt-64::before {
|
||
content: "\f34C";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-podcasts-16::before {
|
||
content: "\f238";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-podcasts-24::before {
|
||
content: "\f3C5";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-podcasts-32::before {
|
||
content: "\f239";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-podcasts-48::before {
|
||
content: "\f45E";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-podcasts-64::before {
|
||
content: "\f23A";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-podcasts-active-16::before {
|
||
content: "\f4b0";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-podcasts-active-24::before {
|
||
content: "\f4b1";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-podcasts-active-32::before {
|
||
content: "\f4b2";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-podcasts-active-48::before {
|
||
content: "\f4b3";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-podcasts-active-64::before {
|
||
content: "\f4b4";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-public-16::before {
|
||
content: "\f190";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-public-32::before {
|
||
content: "\f191";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-queue-16::before {
|
||
content: "\f13a";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-queue-24::before {
|
||
content: "\f3A3";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-queue-32::before {
|
||
content: "\f13b";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-queue-48::before {
|
||
content: "\f45F";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-queue-64::before {
|
||
content: "\f193";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-queue-number-48::before {
|
||
content: "\f460";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-radio-16::before {
|
||
content: "\f13c";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-radio-24::before {
|
||
content: "\f1C7";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-radio-32::before {
|
||
content: "\f13d";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-radio-48::before {
|
||
content: "\f461";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-radio-64::before {
|
||
content: "\f194";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-radio-active-16::before {
|
||
content: "\f381";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-radio-active-24::before {
|
||
content: "\f382";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-radio-active-32::before {
|
||
content: "\f383";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-radio-active-48::before {
|
||
content: "\f462";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-radio-active-64::before {
|
||
content: "\f384";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-radioqueue-16::before {
|
||
content: "\f26E";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-radioqueue-32::before {
|
||
content: "\f26F";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-redeem-16::before {
|
||
content: "\f24D";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-redeem-32::before {
|
||
content: "\f24E";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-refresh-16::before {
|
||
content: "\f195";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-refresh-24::before {
|
||
content: "\f3B2";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-refresh-32::before {
|
||
content: "\f196";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-refresh-48::before {
|
||
content: "\f463";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-refresh-64::before {
|
||
content: "\f197";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-released-16::before {
|
||
content: "\f198";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-released-24::before {
|
||
content: "\f3B3";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-released-32::before {
|
||
content: "\f199";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-released-48::before {
|
||
content: "\f464";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-released-64::before {
|
||
content: "\f19A";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-released-alt-48::before {
|
||
content: "\f465";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-repeat-16::before {
|
||
content: "\f13e";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-repeat-24::before {
|
||
content: "\f1D4";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-repeat-32::before {
|
||
content: "\f13f";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-repeat-48::before {
|
||
content: "\f466";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-repeat-64::before {
|
||
content: "\f19B";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-repeatonce-16::before {
|
||
content: "\f200";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-repeatonce-24::before {
|
||
content: "\f201";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-repeatonce-32::before {
|
||
content: "\f202";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-repeatonce-48::before {
|
||
content: "\f467";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-repeatonce-64::before {
|
||
content: "\f209";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-report-abuse-16::before {
|
||
content: "\f261";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-report-abuse-24::before {
|
||
content: "\f3C7";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-report-abuse-32::before {
|
||
content: "\f256";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-report-abuse-48::before {
|
||
content: "\f468";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-report-abuse-64::before {
|
||
content: "\f3F8";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-running-16::before {
|
||
content: "\f28F";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-running-32::before {
|
||
content: "\f290";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-search-16::before {
|
||
content: "\f140";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-search-24::before {
|
||
content: "\f3A4";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-search-32::before {
|
||
content: "\f141";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-search-48::before {
|
||
content: "\f469";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-search-64::before {
|
||
content: "\f19F";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-search-active-16::before {
|
||
content: "\f371";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-search-active-24::before {
|
||
content: "\f372";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-search-active-32::before {
|
||
content: "\f373";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-search-active-48::before {
|
||
content: "\f46A";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-search-active-64::before {
|
||
content: "\f374";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-sendto-16::before {
|
||
content: "\f232";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-sendto-32::before {
|
||
content: "\f233";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-sendto-64::before {
|
||
content: "\f234";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-share-16::before {
|
||
content: "\f142";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-share-24::before {
|
||
content: "\f3A5";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-share-32::before {
|
||
content: "\f143";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-share-48::before {
|
||
content: "\f46B";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-share-64::before {
|
||
content: "\f1BC";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-share-android-16::before {
|
||
content: "\f216";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-share-android-24::before {
|
||
content: "\f48f";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-share-android-32::before {
|
||
content: "\f217";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-share-android-48::before {
|
||
content: "\f490";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-share-android-64::before {
|
||
content: "\f218";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-sharetofollowers-16::before {
|
||
content: "\f235";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-sharetofollowers-32::before {
|
||
content: "\f236";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-sharetofollowers-64::before {
|
||
content: "\f237";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-shows-16::before {
|
||
content: "\f27D";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-shows-32::before {
|
||
content: "\f27E";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-shuffle-16::before {
|
||
content: "\f144";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-shuffle-24::before {
|
||
content: "\f1D5";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-shuffle-32::before {
|
||
content: "\f145";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-shuffle-48::before {
|
||
content: "\f46C";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-shuffle-64::before {
|
||
content: "\f1A0";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-skip-24::before {
|
||
content: "\f3D9";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-skip-64::before {
|
||
content: "\f3F9";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-skip-active-24::before {
|
||
content: "\f3DA";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-skip-active-64::before {
|
||
content: "\f3FA";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-skip-back-16::before {
|
||
content: "\f146";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-skip-back-24::before {
|
||
content: "\f1D6";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-skip-back-32::before {
|
||
content: "\f147";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-skip-back-48::before {
|
||
content: "\f46D";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-skip-back-64::before {
|
||
content: "\f1A1";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-skip-forward-16::before {
|
||
content: "\f148";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-skip-forward-24::before {
|
||
content: "\f1D7";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-skip-forward-32::before {
|
||
content: "\f149";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-skip-forward-48::before {
|
||
content: "\f46E";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-skip-forward-64::before {
|
||
content: "\f1A2";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-skipback15-16::before {
|
||
content: "\f280";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-skipback15-24::before {
|
||
content: "\f3CC";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-skipback15-32::before {
|
||
content: "\f281";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-skipback15-48::before {
|
||
content: "\f46F";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-skipback15-64::before {
|
||
content: "\f3FB";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-skipforward15-16::before {
|
||
content: "\f283";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-skipforward15-24::before {
|
||
content: "\f3CD";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-skipforward15-32::before {
|
||
content: "\f284";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-skipforward15-48::before {
|
||
content: "\f470";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-skipforward15-64::before {
|
||
content: "\f3FC";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-sleeptimer-16::before {
|
||
content: "\f289";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-sleeptimer-32::before {
|
||
content: "\f28A";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-sms-16::before {
|
||
content: "\f1EB";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-sms-32::before {
|
||
content: "\f1EC";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-sms-64::before {
|
||
content: "\f1F8";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-sort-16::before {
|
||
content: "\f223";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-sort-24::before {
|
||
content: "\f3C1";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-sort-32::before {
|
||
content: "\f224";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-sort-48::before {
|
||
content: "\f471";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-sort-64::before {
|
||
content: "\f225";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-sort-down-48::before {
|
||
content: "\f472";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-sort-up-48::before {
|
||
content: "\f473";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-sortdown-16::before {
|
||
content: "\f226";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-sortdown-24::before {
|
||
content: "\f3C2";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-sortdown-32::before {
|
||
content: "\f227";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-sortdown-64::before {
|
||
content: "\f228";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-sortup-16::before {
|
||
content: "\f229";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-sortup-24::before {
|
||
content: "\f3C3";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-sortup-32::before {
|
||
content: "\f22A";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-sortup-64::before {
|
||
content: "\f22B";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-16::before {
|
||
content: "\f1A3";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-24::before {
|
||
content: "\f1D8";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-32::before {
|
||
content: "\f1A4";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-48::before {
|
||
content: "\f474";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-64::before {
|
||
content: "\f1A5";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-alt-16::before {
|
||
content: "\f351";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-alt-24::before {
|
||
content: "\f352";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-alt-32::before {
|
||
content: "\f353";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-alt-48::before {
|
||
content: "\f475";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-alt-64::before {
|
||
content: "\f354";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-onewave-48::before {
|
||
content: "\f476";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-onewave-64::before {
|
||
content: "\f3FD";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-twowave-48::before {
|
||
content: "\f477";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-spotify-connect-twowave-64::before {
|
||
content: "\f3FE";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-spotifylogo-16::before {
|
||
content: "\f298";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-spotifylogo-24::before {
|
||
content: "\f3CF";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-spotifylogo-32::before {
|
||
content: "\f299";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-spotifylogo-48::before {
|
||
content: "\f478";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-spotifylogo-64::before {
|
||
content: "\f3FF";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-spotifypremium-16::before {
|
||
content: "\f292";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-spotifypremium-32::before {
|
||
content: "\f293";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-star-16::before {
|
||
content: "\f14a";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-star-24::before {
|
||
content: "\f3A6";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-star-32::before {
|
||
content: "\f14b";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-star-48::before {
|
||
content: "\f479";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-star-64::before {
|
||
content: "\f1A6";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-star-alt-16::before {
|
||
content: "\f4ab";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-star-alt-24::before {
|
||
content: "\f4ac";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-star-alt-32::before {
|
||
content: "\f4ad";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-star-alt-48::before {
|
||
content: "\f4ae";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-star-alt-64::before {
|
||
content: "\f4af";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-stations-16::before {
|
||
content: "\f4f6";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-stations-24::before {
|
||
content: "\f4f7";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-stations-32::before {
|
||
content: "\f4f8";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-stations-48::before {
|
||
content: "\f4f9";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-stations-64::before {
|
||
content: "\f4fa";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-subtitles-16::before {
|
||
content: "\f4bf";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-subtitles-24::before {
|
||
content: "\f4c0";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-subtitles-32::before {
|
||
content: "\f4c1";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-subtitles-48::before {
|
||
content: "\f4c2";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-subtitles-64::before {
|
||
content: "\f4c3";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-tag-16::before {
|
||
content: "\f14c";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-tag-24::before {
|
||
content: "\f3A7";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-tag-32::before {
|
||
content: "\f14d";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-tag-48::before {
|
||
content: "\f47A";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-tag-64::before {
|
||
content: "\f400";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-thumbs-down-16::before {
|
||
content: "\f14e";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-thumbs-down-24::before {
|
||
content: "\f1D9";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-thumbs-down-32::before {
|
||
content: "\f14f";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-thumbs-down-48::before {
|
||
content: "\f47B";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-thumbs-down-64::before {
|
||
content: "\f1A7";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-thumbs-up-16::before {
|
||
content: "\f150";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-thumbs-up-24::before {
|
||
content: "\f1DA";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-thumbs-up-32::before {
|
||
content: "\f151";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-thumbs-up-48::before {
|
||
content: "\f47C";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-thumbs-up-64::before {
|
||
content: "\f1A8";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-time-16::before {
|
||
content: "\f152";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-time-24::before {
|
||
content: "\f3A8";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-time-32::before {
|
||
content: "\f153";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-time-48::before {
|
||
content: "\f47D";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-time-64::before {
|
||
content: "\f1A9";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-topcountry-16::before {
|
||
content: "\f27A";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-topcountry-32::before {
|
||
content: "\f27B";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-track-16::before {
|
||
content: "\f156";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-track-24::before {
|
||
content: "\f3A9";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-track-32::before {
|
||
content: "\f157";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-track-48::before {
|
||
content: "\f47E";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-track-64::before {
|
||
content: "\f1AA";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-trending-16::before {
|
||
content: "\f158";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-trending-24::before {
|
||
content: "\f3AA";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-trending-32::before {
|
||
content: "\f159";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-trending-48::before {
|
||
content: "\f47F";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-trending-64::before {
|
||
content: "\f1AB";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-trending-active-16::before {
|
||
content: "\f35D";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-trending-active-24::before {
|
||
content: "\f35E";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-trending-active-32::before {
|
||
content: "\f35F";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-trending-active-48::before {
|
||
content: "\f480";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-trending-active-64::before {
|
||
content: "\f360";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-tumblr-16::before {
|
||
content: "\f250";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-tumblr-32::before {
|
||
content: "\f251";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-twitter-16::before {
|
||
content: "\f1ED";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-twitter-32::before {
|
||
content: "\f1EE";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-twitter-64::before {
|
||
content: "\f1F9";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-user-16::before {
|
||
content: "\f15c";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-user-24::before {
|
||
content: "\f3AB";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-user-32::before {
|
||
content: "\f15d";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-user-48::before {
|
||
content: "\f481";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-user-64::before {
|
||
content: "\f1AF";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-user-active-16::before {
|
||
content: "\f375";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-user-active-24::before {
|
||
content: "\f376";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-user-active-32::before {
|
||
content: "\f377";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-user-active-48::before {
|
||
content: "\f482";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-user-active-64::before {
|
||
content: "\f378";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-user-alt-16::before {
|
||
content: "\f355";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-user-alt-24::before {
|
||
content: "\f356";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-user-alt-32::before {
|
||
content: "\f357";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-user-alt-48::before {
|
||
content: "\f483";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-user-alt-64::before {
|
||
content: "\f358";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-user-alt-active-48::before {
|
||
content: "\f484";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-user-circle-16::before {
|
||
content: "\f118";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-user-circle-24::before {
|
||
content: "\f119";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-user-circle-32::before {
|
||
content: "\f154";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-user-circle-48::before {
|
||
content: "\f155";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-user-circle-64::before {
|
||
content: "\f15a";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-video-16::before {
|
||
content: "\f26B";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-video-24::before {
|
||
content: "\f2A0";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-video-32::before {
|
||
content: "\f26C";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-video-48::before {
|
||
content: "\f489";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-video-64::before {
|
||
content: "\f26D";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-volume-16::before {
|
||
content: "\f15e";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-volume-24::before {
|
||
content: "\f1DB";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-volume-32::before {
|
||
content: "\f15f";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-volume-48::before {
|
||
content: "\f485";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-volume-64::before {
|
||
content: "\f1B0";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-volume-off-16::before {
|
||
content: "\f1EF";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-volume-off-24::before {
|
||
content: "\f3BB";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-volume-off-32::before {
|
||
content: "\f1F0";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-volume-off-48::before {
|
||
content: "\f486";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-volume-off-64::before {
|
||
content: "\f1F1";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-volume-onewave-16::before {
|
||
content: "\f203";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-volume-onewave-24::before {
|
||
content: "\f204";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-volume-onewave-32::before {
|
||
content: "\f205";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-volume-twowave-16::before {
|
||
content: "\f206";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-volume-twowave-24::before {
|
||
content: "\f207";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-volume-twowave-32::before {
|
||
content: "\f208";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-warning-16::before {
|
||
content: "\f1F2";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-warning-32::before {
|
||
content: "\f1F3";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-warning-64::before {
|
||
content: "\f1F4";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-watch-16::before {
|
||
content: "\f359";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-watch-24::before {
|
||
content: "\f35A";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-watch-32::before {
|
||
content: "\f35B";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-watch-48::before {
|
||
content: "\f487";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-watch-64::before {
|
||
content: "\f35C";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-whatsapp-16::before {
|
||
content: "\f210";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-whatsapp-32::before {
|
||
content: "\f211";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-whatsapp-64::before {
|
||
content: "\f212";
|
||
font-size: 64px;
|
||
}
|
||
|
||
.spoticon-x-16::before {
|
||
content: "\f160";
|
||
font-size: 16px;
|
||
}
|
||
|
||
.spoticon-x-24::before {
|
||
content: "\f1C5";
|
||
font-size: 24px;
|
||
}
|
||
|
||
.spoticon-x-32::before {
|
||
content: "\f161";
|
||
font-size: 32px;
|
||
}
|
||
|
||
.spoticon-x-48::before {
|
||
content: "\f488";
|
||
font-size: 48px;
|
||
}
|
||
|
||
.spoticon-x-64::before {
|
||
content: "\f1B1";
|
||
font-size: 64px;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/**
|
||
* Spoticons Mixins
|
||
*
|
||
* There are two mixins that might be useful when dealing with Spoticons.
|
||
*
|
||
* ##### `.spoticon-font()`
|
||
* Gives you the font, font-family, font-style, etc styles for creating a spoticon.
|
||
*
|
||
* ##### `.spoticon($icon; $size;)`
|
||
* Creates a standard spoticon. Basically creates a `:before` pseudo element,
|
||
* gives that element `.spoticon-font()` and sets the the content to the correct
|
||
* icon and font-size.
|
||
*
|
||
* NOTE: If you want the volume icon, pass just `volume` as the name not
|
||
* `$spoticon-volume-16`,`$spoticon-volume-32`, or even `"\f15e"`. The mixin
|
||
* will choose the correct icon and size for you.
|
||
*
|
||
* Styleguide 1.2.2
|
||
*/
|
||
/**
|
||
* Spoticons In Text
|
||
*
|
||
* Some Spoticons need to be aligned with text.
|
||
*
|
||
* Markup: <div style="line-height: 50px">
|
||
* <span class="spoticon-thumbs-up-24"></span>Thumbs Up <span class="spoticon-thumbs-down-24"></span>Thumbs Down
|
||
* </div>
|
||
* <div>
|
||
* <span class="spoticon-gears-16"></span> Settings Icon <span class="spoticon-playlist-16"></span> Playlist
|
||
* </div>
|
||
*
|
||
* Styleguide 1.2.4
|
||
*/
|
||
.spoticon-settings-16::before {
|
||
content: "\f122";
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
|
||
|
||
html:lang(he) .spoticon-helpcircle-16::before, html:lang(he) .spoticon-helpcircle-24::before, html:lang(he) .spoticon-helpcircle-32::before, html:lang(he) .spoticon-helpcircle-48::before, html:lang(he) .spoticon-helpcircle-64::before {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.clearfix::after {
|
||
content: "";
|
||
display: table;
|
||
}
|
||
|
||
.clearfix::after {
|
||
clear: both;
|
||
}
|
||
|
||
.pull-right {
|
||
float: right;
|
||
}
|
||
|
||
|
||
|
||
.pull-left {
|
||
float: left;
|
||
}
|
||
|
||
|
||
|
||
.hide {
|
||
display: none !important;
|
||
}
|
||
|
||
.show {
|
||
display: block !important;
|
||
}
|
||
|
||
.hidden {
|
||
display: none !important;
|
||
visibility: hidden !important;
|
||
}
|
||
|
||
.invisible {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.glue-hidden-visually {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
overflow: hidden;
|
||
clip: rect(0 0 0 0);
|
||
}
|
||
|
||
.glue-hidden-visually {
|
||
margin: -1px;
|
||
padding: 0;
|
||
border: 0;
|
||
}
|
||
|
||
.affix {
|
||
position: fixed;
|
||
}
|
||
|
||
.border-box {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.img-circle {
|
||
border-radius: 500px;
|
||
}
|
||
|
||
.allow-overflow {
|
||
overflow: visible !important;
|
||
}
|
||
|
||
.selectable {
|
||
-webkit-touch-callout: default;
|
||
user-select: text;
|
||
}
|
||
|
||
.selectable {
|
||
cursor: text;
|
||
}
|
||
|
||
body:not(.scrollbar-style-when-scrolling-mac):not(.scrollbar-style-visible-mac):not(.scrollbar-style-visible-windows):not(.scrollbar-style-visible-linux)::-webkit-scrollbar,
|
||
body:not(.scrollbar-style-when-scrolling-mac):not(.scrollbar-style-visible-mac):not(.scrollbar-style-visible-windows):not(.scrollbar-style-visible-linux) ::-webkit-scrollbar {
|
||
height: 0;
|
||
width: 0;
|
||
}
|
||
|
||
.scrollbar-style-visible-mac ::-webkit-scrollbar-track, .scrollbar-style-visible-mac::-webkit-scrollbar-track, .scrollbar-style-visible-windows ::-webkit-scrollbar-track, .scrollbar-style-visible-windows::-webkit-scrollbar-track, .scrollbar-style-visible-linux ::-webkit-scrollbar-track, .scrollbar-style-visible-linux::-webkit-scrollbar-track {
|
||
background-color: #181818;
|
||
}
|
||
.scrollbar-style-visible-mac::-webkit-scrollbar,
|
||
.scrollbar-style-visible-mac ::-webkit-scrollbar,
|
||
.scrollbar-style-visible-windows::-webkit-scrollbar,
|
||
.scrollbar-style-visible-windows ::-webkit-scrollbar,
|
||
.scrollbar-style-visible-linux::-webkit-scrollbar,
|
||
.scrollbar-style-visible-linux ::-webkit-scrollbar {
|
||
width: 16px;
|
||
}
|
||
.scrollbar-style-visible-mac::-webkit-scrollbar:horizontal,
|
||
.scrollbar-style-visible-mac ::-webkit-scrollbar:horizontal,
|
||
.scrollbar-style-visible-windows::-webkit-scrollbar:horizontal,
|
||
.scrollbar-style-visible-windows ::-webkit-scrollbar:horizontal,
|
||
.scrollbar-style-visible-linux::-webkit-scrollbar:horizontal,
|
||
.scrollbar-style-visible-linux ::-webkit-scrollbar:horizontal {
|
||
height: 16px;
|
||
}
|
||
.scrollbar-style-visible-mac::-webkit-scrollbar-thumb,
|
||
.scrollbar-style-visible-mac ::-webkit-scrollbar-thumb,
|
||
.scrollbar-style-visible-windows::-webkit-scrollbar-thumb,
|
||
.scrollbar-style-visible-windows ::-webkit-scrollbar-thumb,
|
||
.scrollbar-style-visible-linux::-webkit-scrollbar-thumb,
|
||
.scrollbar-style-visible-linux ::-webkit-scrollbar-thumb {
|
||
min-height: 32px;
|
||
min-width: 32px;
|
||
}
|
||
.scrollbar-style-visible-mac::-webkit-scrollbar-thumb, .scrollbar-style-visible-mac ::-webkit-scrollbar-thumb, .scrollbar-style-visible-windows::-webkit-scrollbar-thumb, .scrollbar-style-visible-windows ::-webkit-scrollbar-thumb, .scrollbar-style-visible-linux::-webkit-scrollbar-thumb, .scrollbar-style-visible-linux ::-webkit-scrollbar-thumb {
|
||
background-color: #535353;
|
||
}
|
||
.scrollbar-style-visible-mac::-webkit-scrollbar-thumb:hover, .scrollbar-style-visible-mac ::-webkit-scrollbar-thumb:hover, .scrollbar-style-visible-windows::-webkit-scrollbar-thumb:hover, .scrollbar-style-visible-windows ::-webkit-scrollbar-thumb:hover, .scrollbar-style-visible-linux::-webkit-scrollbar-thumb:hover, .scrollbar-style-visible-linux ::-webkit-scrollbar-thumb:hover {
|
||
background-color: #b3b3b3;
|
||
}
|
||
.scrollbar-style-visible-mac::-webkit-scrollbar-corner, .scrollbar-style-visible-mac ::-webkit-scrollbar-corner, .scrollbar-style-visible-windows::-webkit-scrollbar-corner, .scrollbar-style-visible-windows ::-webkit-scrollbar-corner, .scrollbar-style-visible-linux::-webkit-scrollbar-corner, .scrollbar-style-visible-linux ::-webkit-scrollbar-corner {
|
||
background-color: #121212;
|
||
}
|
||
|
||
.scrollbar-style-visible-mac::-webkit-scrollbar-thumb, .scrollbar-style-visible-mac ::-webkit-scrollbar-thumb {
|
||
border: 4px solid transparent;
|
||
border-radius: 16px;
|
||
background-clip: padding-box;
|
||
}
|
||
|
||
.scrollbar-style-visible-windows::-webkit-scrollbar-thumb, .scrollbar-style-visible-windows ::-webkit-scrollbar-thumb {
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.scrollbar-style-visible-linux::-webkit-scrollbar-thumb, .scrollbar-style-visible-linux ::-webkit-scrollbar-thumb {
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.scrollbar-style-visible-windows::-webkit-scrollbar-button, .scrollbar-style-visible-windows ::-webkit-scrollbar-button, .scrollbar-style-visible-linux::-webkit-scrollbar-button, .scrollbar-style-visible-linux ::-webkit-scrollbar-button {
|
||
background-color: #181818;
|
||
background-image: url("https://local_resource_host/images/scrollbar-buttons.png");
|
||
background-size: 16px 64px;
|
||
}
|
||
.scrollbar-style-visible-windows::-webkit-scrollbar-button:disabled, .scrollbar-style-visible-windows ::-webkit-scrollbar-button:disabled, .scrollbar-style-visible-linux::-webkit-scrollbar-button:disabled, .scrollbar-style-visible-linux ::-webkit-scrollbar-button:disabled {
|
||
background-image: none;
|
||
}
|
||
.scrollbar-style-visible-windows::-webkit-scrollbar-button:vertical:start:decrement,
|
||
.scrollbar-style-visible-windows ::-webkit-scrollbar-button:vertical:start:decrement, .scrollbar-style-visible-windows::-webkit-scrollbar-button:vertical:end:increment,
|
||
.scrollbar-style-visible-windows ::-webkit-scrollbar-button:vertical:end:increment,
|
||
.scrollbar-style-visible-linux::-webkit-scrollbar-button:vertical:start:decrement,
|
||
.scrollbar-style-visible-linux ::-webkit-scrollbar-button:vertical:start:decrement,
|
||
.scrollbar-style-visible-linux::-webkit-scrollbar-button:vertical:end:increment,
|
||
.scrollbar-style-visible-linux ::-webkit-scrollbar-button:vertical:end:increment {
|
||
display: block;
|
||
height: 16px;
|
||
}
|
||
.scrollbar-style-visible-windows::-webkit-scrollbar-button:horizontal:start:increment,
|
||
.scrollbar-style-visible-windows ::-webkit-scrollbar-button:horizontal:start:increment, .scrollbar-style-visible-windows::-webkit-scrollbar-button:horizontal:end:decrement,
|
||
.scrollbar-style-visible-windows ::-webkit-scrollbar-button:horizontal:end:decrement,
|
||
.scrollbar-style-visible-linux::-webkit-scrollbar-button:horizontal:start:increment,
|
||
.scrollbar-style-visible-linux ::-webkit-scrollbar-button:horizontal:start:increment,
|
||
.scrollbar-style-visible-linux::-webkit-scrollbar-button:horizontal:end:decrement,
|
||
.scrollbar-style-visible-linux ::-webkit-scrollbar-button:horizontal:end:decrement {
|
||
display: none;
|
||
}
|
||
.scrollbar-style-visible-windows::-webkit-scrollbar-button:vertical:start:decrement, .scrollbar-style-visible-windows ::-webkit-scrollbar-button:vertical:start:decrement, .scrollbar-style-visible-linux::-webkit-scrollbar-button:vertical:start:decrement, .scrollbar-style-visible-linux ::-webkit-scrollbar-button:vertical:start:decrement {
|
||
background-position: 0 0;
|
||
}
|
||
|
||
.scrollbar-style-visible-windows::-webkit-scrollbar-button:vertical:end:increment, .scrollbar-style-visible-windows ::-webkit-scrollbar-button:vertical:end:increment, .scrollbar-style-visible-linux::-webkit-scrollbar-button:vertical:end:increment, .scrollbar-style-visible-linux ::-webkit-scrollbar-button:vertical:end:increment {
|
||
background-position: 0 -16px;
|
||
}
|
||
|
||
.scrollbar-style-visible-windows::-webkit-scrollbar-button:horizontal:start:decrement, .scrollbar-style-visible-windows ::-webkit-scrollbar-button:horizontal:start:decrement, .scrollbar-style-visible-linux::-webkit-scrollbar-button:horizontal:start:decrement, .scrollbar-style-visible-linux ::-webkit-scrollbar-button:horizontal:start:decrement {
|
||
background-position: 0 -32px;
|
||
}
|
||
|
||
.scrollbar-style-visible-windows::-webkit-scrollbar-button:horizontal:end:increment, .scrollbar-style-visible-windows ::-webkit-scrollbar-button:horizontal:end:increment, .scrollbar-style-visible-linux::-webkit-scrollbar-button:horizontal:end:increment, .scrollbar-style-visible-linux ::-webkit-scrollbar-button:horizontal:end:increment {
|
||
background-position: 0 -48px;
|
||
}
|
||
|
||
.scrollbar-style-visible-windows.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start,
|
||
.scrollbar-style-visible-linux.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start,
|
||
.scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start,
|
||
.scrollbar-style-visible-linux.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start {
|
||
height: 64px;
|
||
}
|
||
.scrollbar-style-visible-windows.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start {
|
||
background-color: transparent;
|
||
background-image: url("https://local_resource_host/images/scrollbar-buttons.png"), linear-gradient(to bottom, #181818, #181818 16px);
|
||
background-repeat: no-repeat;
|
||
}
|
||
.scrollbar-style-visible-windows.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start {
|
||
background-position: 0 48px;
|
||
}
|
||
|
||
.scrollbar-style-visible-windows.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start:disabled, .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start:disabled, .scrollbar-style-visible-windows.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start:disabled, .scrollbar-style-visible-linux.is-login-page.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start:disabled, .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start:disabled, .scrollbar-style-visible-linux.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start:disabled {
|
||
background-image: none;
|
||
}
|
||
.scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows.messagebar::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.body-container--windows.messagebar .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start,
|
||
.scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows.messagebar::-webkit-scrollbar-button:vertical:decrement:start,
|
||
.scrollbar-style-visible-linux.body-container--windows.messagebar .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start {
|
||
height: 33px;
|
||
}
|
||
.scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows.messagebar::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-windows.body-container--windows.messagebar .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows.messagebar::-webkit-scrollbar-button:vertical:decrement:start, .scrollbar-style-visible-linux.body-container--windows.messagebar .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start {
|
||
background-position: 0 17px;
|
||
}
|
||
|
||
|
||
/**
|
||
* Drag & Drop
|
||
*
|
||
* Not much use for anyone except spotify-events.
|
||
*
|
||
* Markup:
|
||
* <div class="dnd-image" draggable>Text
|
||
* </div>
|
||
*
|
||
* Styleguide 60.7
|
||
*/
|
||
[draggable] {
|
||
user-select: none;
|
||
}
|
||
|
||
.dnd-image-shelter {
|
||
position: fixed;
|
||
top: 0;
|
||
width: 300px;
|
||
height: 300px;
|
||
z-index: -1;
|
||
}
|
||
|
||
.dnd-image-shelter {
|
||
background-color: #181818;
|
||
}
|
||
|
||
.dnd-image-shelter {
|
||
left: 0;
|
||
}
|
||
|
||
|
||
|
||
.dnd-image {
|
||
position: fixed;
|
||
top: 0;
|
||
color: #ffffff;
|
||
display: inline-block;
|
||
font-size: 13px;
|
||
max-width: 300px;
|
||
max-height: 300px;
|
||
z-index: -2;
|
||
}
|
||
|
||
.dnd-image {
|
||
border-radius: 4px;
|
||
padding: 3px 10px 1px;
|
||
}
|
||
|
||
.dnd-image {
|
||
left: 0;
|
||
border-left: 10px solid transparent;
|
||
}
|
||
|
||
|
||
|
||
.dnd-image::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
color: #ffffff;
|
||
z-index: -2;
|
||
}
|
||
|
||
.dnd-image::before {
|
||
background: #282828;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 5px #000000;
|
||
}
|
||
|
||
.dnd-image::before {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
|
||
.tr-drag-indicator {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.tr-drag-indicator {
|
||
border-top: 1px solid #1db954;
|
||
}
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
/**
|
||
* Code
|
||
*
|
||
* Styleguide 20.7
|
||
*/
|
||
/**
|
||
* Inline
|
||
*
|
||
* Wrap inline snippets of code
|
||
*
|
||
* Markup:
|
||
* For example, <code><section></code> should be wrapped as inline.
|
||
*
|
||
* Styleguide 20.7.1
|
||
*/
|
||
/**
|
||
* Block
|
||
*
|
||
* Markup:
|
||
* <pre><p>Sample text here...</p></pre>
|
||
*
|
||
* Styleguide 20.7.2
|
||
*/
|
||
code,
|
||
pre {
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-family: var(--glue-font-family-monospace);
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: none;
|
||
font-size: 12px;
|
||
}
|
||
|
||
|
||
code {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
code {
|
||
padding: 2px 4px;
|
||
background-color: #282828;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
pre {
|
||
color: #b3b3b3;
|
||
display: block;
|
||
font-size: 13px;
|
||
line-height: 20px;
|
||
word-break: break-all;
|
||
word-wrap: break-word;
|
||
white-space: pre;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
pre {
|
||
padding: 10px;
|
||
background-color: #282828;
|
||
}
|
||
pre.prettyprint {
|
||
margin-bottom: 20px;
|
||
}
|
||
pre code {
|
||
color: inherit;
|
||
white-space: pre;
|
||
white-space: pre-wrap;
|
||
}
|
||
pre code {
|
||
padding: 0;
|
||
background-color: transparent;
|
||
border: 0;
|
||
}
|
||
|
||
.fade {
|
||
opacity: 0;
|
||
transition: opacity 0.15s linear;
|
||
}
|
||
.fade.in {
|
||
opacity: 1;
|
||
}
|
||
|
||
.collapse {
|
||
position: relative;
|
||
height: 0;
|
||
overflow: hidden;
|
||
transition: height 0.35s ease;
|
||
}
|
||
.collapse.in {
|
||
height: auto;
|
||
}
|
||
|
||
.button {
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
display: inline-block;
|
||
position: relative;
|
||
vertical-align: middle;
|
||
z-index: 0;
|
||
font-weight: var(--glue-font-weight-bold);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.button {
|
||
cursor: default;
|
||
margin-bottom: 0;
|
||
text-align: center;
|
||
background-color: transparent;
|
||
border: 0;
|
||
}
|
||
|
||
|
||
.button:focus {
|
||
outline: none;
|
||
}
|
||
.button:disabled:not(.current) {
|
||
pointer-events: none;
|
||
opacity: 0.4;
|
||
}
|
||
.button:disabled:not(.current) {
|
||
cursor: default;
|
||
}
|
||
@media screen and (-webkit-min-device-pixel-ratio: 2) {
|
||
.button {
|
||
backface-visibility: hidden;
|
||
}
|
||
}
|
||
.button.button-green {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-green {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: #1db954;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-green {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
|
||
.button.button-green .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.button.button-green.contextmenu-active, .button.button-green:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-green.contextmenu-active, .button.button-green:not(:disabled):hover {
|
||
background-color: #1ed760;
|
||
}
|
||
.button.button-green:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-green:not(:disabled):hover:active {
|
||
background: #14833b;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-green:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-green {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-green::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-green::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-green::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-green.contextmenu-active, .button.button-green:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-green.contextmenu-active, .button.button-green:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-green.contextmenu-active, .button.button-green:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-green.contextmenu-active::after, .button.button-green:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-green.contextmenu-active::after, .button.button-green:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-green.contextmenu-active::after, .button.button-green:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-green:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-green:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-green:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-green:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
}
|
||
.button.button-white {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #000000;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-white {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: #ffffff;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-white {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
|
||
.button.button-white .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.button.button-white.contextmenu-active, .button.button-white:not(:disabled):hover {
|
||
color: #000000;
|
||
}
|
||
.button.button-white.contextmenu-active, .button.button-white:not(:disabled):hover {
|
||
background-color: #ffffff;
|
||
}
|
||
.button.button-white:not(:disabled):hover:active {
|
||
color: #000000;
|
||
}
|
||
.button.button-white:not(:disabled):hover:active {
|
||
background: #b3b3b3;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-white:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-white {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-white::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-white::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-white::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-white.contextmenu-active, .button.button-white:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-white.contextmenu-active, .button.button-white:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-white.contextmenu-active, .button.button-white:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-white.contextmenu-active::after, .button.button-white:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-white.contextmenu-active::after, .button.button-white:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-white.contextmenu-active::after, .button.button-white:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-white:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-white:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-white:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-white:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
}
|
||
.button.button-blue {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-blue {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: #2e77d0;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-blue {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
|
||
.button.button-blue .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.button.button-blue.contextmenu-active, .button.button-blue:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-blue.contextmenu-active, .button.button-blue:not(:disabled):hover {
|
||
background-color: #4687d6;
|
||
}
|
||
.button.button-blue:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-blue:not(:disabled):hover:active {
|
||
background: #1d4c85;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-blue:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-blue {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-blue::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-blue::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-blue::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-blue.contextmenu-active, .button.button-blue:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-blue.contextmenu-active, .button.button-blue:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-blue.contextmenu-active, .button.button-blue:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-blue.contextmenu-active::after, .button.button-blue:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-blue.contextmenu-active::after, .button.button-blue:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-blue.contextmenu-active::after, .button.button-blue:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-blue:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-blue:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-blue:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-blue:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
}
|
||
.button.button-red {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-red {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: #cd1a2b;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-red {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
|
||
.button.button-red .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.button.button-red.contextmenu-active, .button.button-red:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-red.contextmenu-active, .button.button-red:not(:disabled):hover {
|
||
background-color: #e22134;
|
||
}
|
||
.button.button-red:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-red:not(:disabled):hover:active {
|
||
background: #941320;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-red:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-red {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-red::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-red::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-red::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-red.contextmenu-active, .button.button-red:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-red.contextmenu-active, .button.button-red:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-red.contextmenu-active, .button.button-red:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-red.contextmenu-active::after, .button.button-red:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-red.contextmenu-active::after, .button.button-red:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-red.contextmenu-active::after, .button.button-red:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-red:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-red:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-red:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-red:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
}
|
||
.button.button-gray {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-gray {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: #404040;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-gray {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
|
||
.button.button-gray .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.button.button-gray.contextmenu-active, .button.button-gray:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-gray.contextmenu-active, .button.button-gray:not(:disabled):hover {
|
||
background-color: #535353;
|
||
}
|
||
.button.button-gray:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-gray:not(:disabled):hover:active {
|
||
background: #333333;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-gray:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-gray {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-gray::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-gray::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-gray::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-gray.contextmenu-active, .button.button-gray:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-gray.contextmenu-active, .button.button-gray:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-gray.contextmenu-active, .button.button-gray:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-gray.contextmenu-active::after, .button.button-gray:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-gray.contextmenu-active::after, .button.button-gray:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-gray.contextmenu-active::after, .button.button-gray:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-gray:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-gray:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-gray:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-gray:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
}
|
||
.button.button-with-stroke {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-with-stroke {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-with-stroke {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
|
||
.button.button-with-stroke .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
|
||
background-color: rgba(24, 24, 24, 0.7);
|
||
}
|
||
.button.button-with-stroke:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-with-stroke:not(:disabled):hover:active {
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-with-stroke::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-with-stroke::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-with-stroke.contextmenu-active::after, .button.button-with-stroke:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-with-stroke.contextmenu-active::after, .button.button-with-stroke:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke.contextmenu-active::after, .button.button-with-stroke:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-with-stroke:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-with-stroke:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-with-stroke::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-with-stroke::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-with-stroke::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-with-stroke.contextmenu-active::after, .button.button-with-stroke:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
.button.button-with-stroke.contextmenu-active::after, .button.button-with-stroke:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
}
|
||
.button.button-with-stroke:not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-with-stroke:not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke.contextmenu-active, .button.button-with-stroke:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
}
|
||
.button.button-with-stroke.added, .button.button-with-stroke.active {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-with-stroke.added, .button.button-with-stroke.active {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-with-stroke.added, .button.button-with-stroke.active {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
|
||
.button.button-with-stroke.added .b-alt-text, .button.button-with-stroke.active .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
|
||
background-color: rgba(24, 24, 24, 0.7);
|
||
}
|
||
.button.button-with-stroke.added:not(:disabled):hover:active, .button.button-with-stroke.active:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-with-stroke.added:not(:disabled):hover:active, .button.button-with-stroke.active:not(:disabled):hover:active {
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke.added:not(:disabled):hover:active, .button.button-with-stroke.active:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke.added, .button.button-with-stroke.active {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-with-stroke.added::after, .button.button-with-stroke.active::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-with-stroke.added::after, .button.button-with-stroke.active::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke.added::after, .button.button-with-stroke.active::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-with-stroke.added.contextmenu-active::after, .button.button-with-stroke.added:not(:disabled):hover::after, .button.button-with-stroke.active.contextmenu-active::after, .button.button-with-stroke.active:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-with-stroke.added.contextmenu-active::after, .button.button-with-stroke.added:not(:disabled):hover::after, .button.button-with-stroke.active.contextmenu-active::after, .button.button-with-stroke.active:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke.added.contextmenu-active::after, .button.button-with-stroke.added:not(:disabled):hover::after, .button.button-with-stroke.active.contextmenu-active::after, .button.button-with-stroke.active:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-with-stroke.added:not(:disabled):hover:active, .button.button-with-stroke.active:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-with-stroke.added:not(:disabled):hover:active::after, .button.button-with-stroke.active:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-with-stroke.added::after, .button.button-with-stroke.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-with-stroke.added::after, .button.button-with-stroke.active::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-with-stroke.added::after, .button.button-with-stroke.active::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-with-stroke.added.contextmenu-active::after, .button.button-with-stroke.added:not(:disabled):hover::after, .button.button-with-stroke.active.contextmenu-active::after, .button.button-with-stroke.active:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
.button.button-with-stroke.added.contextmenu-active::after, .button.button-with-stroke.added:not(:disabled):hover::after, .button.button-with-stroke.active.contextmenu-active::after, .button.button-with-stroke.active:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
}
|
||
.button.button-with-stroke.added:not(:disabled):hover:active, .button.button-with-stroke.active:not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-with-stroke.added:not(:disabled):hover:active::after, .button.button-with-stroke.active:not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-with-stroke.added.contextmenu-active, .button.button-with-stroke.added:not(:disabled):hover, .button.button-with-stroke.active.contextmenu-active, .button.button-with-stroke.active:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
}
|
||
.button.button-facebook {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-facebook {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: #3b5998;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-facebook {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
|
||
.button.button-facebook .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.button.button-facebook.contextmenu-active, .button.button-facebook:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-facebook.contextmenu-active, .button.button-facebook:not(:disabled):hover {
|
||
background-color: #3762ba;
|
||
}
|
||
.button.button-facebook:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-facebook:not(:disabled):hover:active {
|
||
background: #365284;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-facebook:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-facebook {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-facebook::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-facebook::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-facebook::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-facebook.contextmenu-active, .button.button-facebook:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-facebook.contextmenu-active, .button.button-facebook:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-facebook.contextmenu-active, .button.button-facebook:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-facebook.contextmenu-active::after, .button.button-facebook:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-facebook.contextmenu-active::after, .button.button-facebook:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-facebook.contextmenu-active::after, .button.button-facebook:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-facebook:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-facebook:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-facebook:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-facebook:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
}
|
||
.button.button-icon-only {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #b3b3b3;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
width: 32px;
|
||
}
|
||
.button.button-icon-only {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: transparent;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-icon-only {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
|
||
.button.button-icon-only .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.button.button-icon-only.contextmenu-active, .button.button-icon-only:not(:disabled):hover {
|
||
color: #ffffff;
|
||
}
|
||
.button.button-icon-only.contextmenu-active, .button.button-icon-only:not(:disabled):hover {
|
||
background-color: transparent;
|
||
}
|
||
.button.button-icon-only:not(:disabled):hover:active {
|
||
color: #b3b3b3;
|
||
}
|
||
.button.button-icon-only:not(:disabled):hover:active {
|
||
background: transparent;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-only:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-only {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-icon-only::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-icon-only::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-only::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-icon-only.contextmenu-active, .button.button-icon-only:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-icon-only.contextmenu-active, .button.button-icon-only:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-only.contextmenu-active, .button.button-icon-only:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-icon-only.contextmenu-active::after, .button.button-icon-only:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-icon-only.contextmenu-active::after, .button.button-icon-only:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-only.contextmenu-active::after, .button.button-icon-only:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-icon-only:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-icon-only:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-icon-only::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
text-align: left/* rtl:ignore */;
|
||
line-height: 32px;
|
||
font-size: 16px;
|
||
padding-left: 8px /* rtl:ignore */;
|
||
width: calc(100% - 8px);
|
||
}
|
||
.button.button-icon-only::before {
|
||
border-radius: 500px;
|
||
}
|
||
.button.button-icon-only::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.button.button-icon-only.button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f132";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.button.button-icon-only.button-play.playing:not(:hover), .tl-row.playing .button.button-icon-only.button-play:not(:hover), .card.playing .button.button-icon-only.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-icon-only.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-icon-only.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-icon-only.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-icon-only.button-play.playing:not(:hover).contextmenu-active, .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-only.button-play.playing:not(:hover).contextmenu-active, .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-icon-only.button-play.playing:not(:hover)::before, .tl-row.playing .button.button-icon-only.button-play:not(:hover)::before, .card.playing .button.button-icon-only.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.button.button-icon-only.button-play.playing:hover::before, .tl-row.playing .button.button-icon-only.button-play:hover::before, .card.playing .button.button-icon-only.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.tl-row.playing.button.button-icon-only.button-play:not(:hover), .card.playing.button.button-icon-only.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-icon-only.button-play:not(:hover)::after,
|
||
.card.playing.button.button-icon-only.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row.playing.button.button-icon-only.button-play:not(:hover)::after, .card.playing.button.button-icon-only.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-icon-only.button-play:not(:hover)::after, .card.playing.button.button-icon-only.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-icon-only.button-play:not(:hover)::before,
|
||
.card.playing.button.button-icon-only.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.tl-row.playing.button.button-icon-only.button-play:hover::before,
|
||
.card.playing.button.button-icon-only.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
|
||
.button.button-icon-only.active {
|
||
color: #1ed760;
|
||
}
|
||
.button.button-icon-only.active.contextmenu-active, .button.button-icon-only.active:not(:disabled):hover {
|
||
color: #1df369;
|
||
}
|
||
.button.button-icon-only.active:not(:disabled):hover:active {
|
||
color: #18ac4d;
|
||
}
|
||
.button.button-icon-only.drop-target-active {
|
||
color: #000000;
|
||
}
|
||
.button.button-icon-only.drop-target-active {
|
||
background-color: #1ed760;
|
||
}
|
||
.button.button-icon-only.drop-target-active.contextmenu-active, .button.button-icon-only.drop-target-active:not(:disabled):hover {
|
||
color: #000000;
|
||
}
|
||
.button.button-icon-only.drop-target-active:not(:disabled):hover:active {
|
||
color: black;
|
||
}
|
||
.button.button-icon-only.drop-target-active.contextmenu-active, .button.button-icon-only.drop-target-active:not(:disabled):hover {
|
||
background-color: #1ed760;
|
||
}
|
||
.button.button-icon-with-stroke {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
width: 32px;
|
||
}
|
||
.button.button-icon-with-stroke {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-icon-with-stroke {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
|
||
.button.button-icon-with-stroke .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
|
||
background-color: rgba(24, 24, 24, 0.7);
|
||
}
|
||
.button.button-icon-with-stroke:not(:disabled):hover:active {
|
||
color: #b3b3b3;
|
||
}
|
||
.button.button-icon-with-stroke:not(:disabled):hover:active {
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-with-stroke:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-with-stroke {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-icon-with-stroke::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-icon-with-stroke::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-with-stroke::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-icon-with-stroke.contextmenu-active::after, .button.button-icon-with-stroke:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-icon-with-stroke.contextmenu-active::after, .button.button-icon-with-stroke:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-with-stroke.contextmenu-active::after, .button.button-icon-with-stroke:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-icon-with-stroke:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-icon-with-stroke:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-icon-with-stroke::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-icon-with-stroke::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-icon-with-stroke::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-icon-with-stroke.contextmenu-active::after, .button.button-icon-with-stroke:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
.button.button-icon-with-stroke.contextmenu-active::after, .button.button-icon-with-stroke:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
}
|
||
.button.button-icon-with-stroke:not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-icon-with-stroke:not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-with-stroke.contextmenu-active, .button.button-icon-with-stroke:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
}
|
||
.button.button-icon-with-stroke::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
text-align: left/* rtl:ignore */;
|
||
line-height: 32px;
|
||
font-size: 16px;
|
||
padding-left: 8px /* rtl:ignore */;
|
||
width: calc(100% - 8px);
|
||
}
|
||
.button.button-icon-with-stroke::before {
|
||
border-radius: 500px;
|
||
}
|
||
.button.button-icon-with-stroke::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.button.button-icon-with-stroke.button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f132";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.button.button-icon-with-stroke.button-play.playing:not(:hover), .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover), .card.playing .button.button-icon-with-stroke.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-icon-with-stroke.button-play.playing:not(:hover)::before, .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover)::before, .card.playing .button.button-icon-with-stroke.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.button.button-icon-with-stroke.button-play.playing:hover::before, .tl-row.playing .button.button-icon-with-stroke.button-play:hover::before, .card.playing .button.button-icon-with-stroke.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover), .card.playing.button.button-icon-with-stroke.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover)::after,
|
||
.card.playing.button.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing.button.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing.button.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover)::before,
|
||
.card.playing.button.button-icon-with-stroke.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.tl-row.playing.button.button-icon-with-stroke.button-play:hover::before,
|
||
.card.playing.button.button-icon-with-stroke.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
|
||
.button.button-large.button-green {
|
||
height: 48px;
|
||
line-height: 46px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.button.button-large.button-green {
|
||
padding-top: 1px;
|
||
border-radius: 24px;
|
||
background: #1db954;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
|
||
.button.button-large.button-green {
|
||
padding-left: 48px;
|
||
padding-right: 48px;
|
||
}
|
||
|
||
|
||
|
||
.button.button-large.button-green .b-alt-text {
|
||
margin-top: -46px;
|
||
}
|
||
.button.button-large.button-green.contextmenu-active, .button.button-large.button-green:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-large.button-green.contextmenu-active, .button.button-large.button-green:not(:disabled):hover {
|
||
background-color: #1ed760;
|
||
}
|
||
.button.button-large.button-green:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-large.button-green:not(:disabled):hover:active {
|
||
background: #14833b;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-green:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-green {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-green::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-large.button-green::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-green::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-green.contextmenu-active, .button.button-large.button-green:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-green.contextmenu-active, .button.button-large.button-green:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-green.contextmenu-active, .button.button-large.button-green:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-green.contextmenu-active::after, .button.button-large.button-green:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-green.contextmenu-active::after, .button.button-large.button-green:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-green.contextmenu-active::after, .button.button-large.button-green:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-green:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-green:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-green:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-green:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-large.button-white {
|
||
height: 48px;
|
||
line-height: 46px;
|
||
color: #000000;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
font-size: 14px;
|
||
}
|
||
.button.button-large.button-white {
|
||
padding-top: 1px;
|
||
border-radius: 24px;
|
||
background: #ffffff;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-large.button-white {
|
||
padding-left: 48px;
|
||
padding-right: 48px;
|
||
}
|
||
|
||
|
||
.button.button-large.button-white .b-alt-text {
|
||
margin-top: -46px;
|
||
}
|
||
.button.button-large.button-white.contextmenu-active, .button.button-large.button-white:not(:disabled):hover {
|
||
color: #000000;
|
||
}
|
||
.button.button-large.button-white.contextmenu-active, .button.button-large.button-white:not(:disabled):hover {
|
||
background-color: #ffffff;
|
||
}
|
||
.button.button-large.button-white:not(:disabled):hover:active {
|
||
color: #000000;
|
||
}
|
||
.button.button-large.button-white:not(:disabled):hover:active {
|
||
background: #b3b3b3;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-white:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-white {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-white::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-large.button-white::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-white::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-white.contextmenu-active, .button.button-large.button-white:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-white.contextmenu-active, .button.button-large.button-white:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-white.contextmenu-active, .button.button-large.button-white:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-white.contextmenu-active::after, .button.button-large.button-white:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-white.contextmenu-active::after, .button.button-large.button-white:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-white.contextmenu-active::after, .button.button-large.button-white:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-white:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-white:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-white:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-white:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-large.button-blue {
|
||
height: 48px;
|
||
line-height: 46px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
font-size: 14px;
|
||
}
|
||
.button.button-large.button-blue {
|
||
padding-top: 1px;
|
||
border-radius: 24px;
|
||
background: #2e77d0;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-large.button-blue {
|
||
padding-left: 48px;
|
||
padding-right: 48px;
|
||
}
|
||
|
||
|
||
.button.button-large.button-blue .b-alt-text {
|
||
margin-top: -46px;
|
||
}
|
||
.button.button-large.button-blue.contextmenu-active, .button.button-large.button-blue:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-large.button-blue.contextmenu-active, .button.button-large.button-blue:not(:disabled):hover {
|
||
background-color: #4687d6;
|
||
}
|
||
.button.button-large.button-blue:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-large.button-blue:not(:disabled):hover:active {
|
||
background: #1d4c85;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-blue:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-blue {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-blue::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-large.button-blue::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-blue::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-blue.contextmenu-active, .button.button-large.button-blue:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-blue.contextmenu-active, .button.button-large.button-blue:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-blue.contextmenu-active, .button.button-large.button-blue:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-blue.contextmenu-active::after, .button.button-large.button-blue:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-blue.contextmenu-active::after, .button.button-large.button-blue:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-blue.contextmenu-active::after, .button.button-large.button-blue:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-blue:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-blue:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-blue:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-blue:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-large.button-red {
|
||
height: 48px;
|
||
line-height: 46px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
font-size: 14px;
|
||
}
|
||
.button.button-large.button-red {
|
||
padding-top: 1px;
|
||
border-radius: 24px;
|
||
background: #cd1a2b;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-large.button-red {
|
||
padding-left: 48px;
|
||
padding-right: 48px;
|
||
}
|
||
|
||
|
||
.button.button-large.button-red .b-alt-text {
|
||
margin-top: -46px;
|
||
}
|
||
.button.button-large.button-red.contextmenu-active, .button.button-large.button-red:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-large.button-red.contextmenu-active, .button.button-large.button-red:not(:disabled):hover {
|
||
background-color: #e22134;
|
||
}
|
||
.button.button-large.button-red:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-large.button-red:not(:disabled):hover:active {
|
||
background: #941320;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-red:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-red {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-red::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-large.button-red::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-red::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-red.contextmenu-active, .button.button-large.button-red:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-red.contextmenu-active, .button.button-large.button-red:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-red.contextmenu-active, .button.button-large.button-red:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-red.contextmenu-active::after, .button.button-large.button-red:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-red.contextmenu-active::after, .button.button-large.button-red:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-red.contextmenu-active::after, .button.button-large.button-red:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-red:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-red:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-red:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-red:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-large.button-gray {
|
||
height: 48px;
|
||
line-height: 46px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
font-size: 14px;
|
||
}
|
||
.button.button-large.button-gray {
|
||
padding-top: 1px;
|
||
border-radius: 24px;
|
||
background: #404040;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-large.button-gray {
|
||
padding-left: 48px;
|
||
padding-right: 48px;
|
||
}
|
||
|
||
|
||
.button.button-large.button-gray .b-alt-text {
|
||
margin-top: -46px;
|
||
}
|
||
.button.button-large.button-gray.contextmenu-active, .button.button-large.button-gray:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-large.button-gray.contextmenu-active, .button.button-large.button-gray:not(:disabled):hover {
|
||
background-color: #535353;
|
||
}
|
||
.button.button-large.button-gray:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-large.button-gray:not(:disabled):hover:active {
|
||
background: #333333;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-gray:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-gray {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-gray::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-large.button-gray::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-gray::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-gray.contextmenu-active, .button.button-large.button-gray:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-gray.contextmenu-active, .button.button-large.button-gray:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-gray.contextmenu-active, .button.button-large.button-gray:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-gray.contextmenu-active::after, .button.button-large.button-gray:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-gray.contextmenu-active::after, .button.button-large.button-gray:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-gray.contextmenu-active::after, .button.button-large.button-gray:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-gray:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-gray:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-gray:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-gray:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-large.button-with-stroke {
|
||
height: 48px;
|
||
line-height: 46px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
font-size: 14px;
|
||
}
|
||
.button.button-large.button-with-stroke {
|
||
padding-top: 1px;
|
||
border-radius: 24px;
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-large.button-with-stroke {
|
||
padding-left: 48px;
|
||
padding-right: 48px;
|
||
}
|
||
|
||
|
||
.button.button-large.button-with-stroke .b-alt-text {
|
||
margin-top: -46px;
|
||
}
|
||
.button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
|
||
background-color: rgba(24, 24, 24, 0.7);
|
||
}
|
||
.button.button-large.button-with-stroke:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-large.button-with-stroke:not(:disabled):hover:active {
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-with-stroke::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-large.button-with-stroke::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-with-stroke.contextmenu-active::after, .button.button-large.button-with-stroke:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-with-stroke.contextmenu-active::after, .button.button-large.button-with-stroke:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke.contextmenu-active::after, .button.button-large.button-with-stroke:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-with-stroke:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-with-stroke:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-with-stroke::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-large.button-with-stroke::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-large.button-with-stroke::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-with-stroke.contextmenu-active::after, .button.button-large.button-with-stroke:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
.button.button-large.button-with-stroke.contextmenu-active::after, .button.button-large.button-with-stroke:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
}
|
||
.button.button-large.button-with-stroke:not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-large.button-with-stroke:not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke.contextmenu-active, .button.button-large.button-with-stroke:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-large.button-with-stroke.added, .button.button-large.button-with-stroke.active {
|
||
height: 48px;
|
||
line-height: 46px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-large.button-with-stroke.added, .button.button-large.button-with-stroke.active {
|
||
padding-top: 1px;
|
||
border-radius: 24px;
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-large.button-with-stroke.added, .button.button-large.button-with-stroke.active {
|
||
padding-left: 48px;
|
||
padding-right: 48px;
|
||
}
|
||
|
||
|
||
.button.button-large.button-with-stroke.added .b-alt-text, .button.button-large.button-with-stroke.active .b-alt-text {
|
||
margin-top: -46px;
|
||
}
|
||
.button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
|
||
background-color: rgba(24, 24, 24, 0.7);
|
||
}
|
||
.button.button-large.button-with-stroke.added:not(:disabled):hover:active, .button.button-large.button-with-stroke.active:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-large.button-with-stroke.added:not(:disabled):hover:active, .button.button-large.button-with-stroke.active:not(:disabled):hover:active {
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke.added:not(:disabled):hover:active, .button.button-large.button-with-stroke.active:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke.added, .button.button-large.button-with-stroke.active {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-with-stroke.added::after, .button.button-large.button-with-stroke.active::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-large.button-with-stroke.added::after, .button.button-large.button-with-stroke.active::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke.added::after, .button.button-large.button-with-stroke.active::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-with-stroke.added.contextmenu-active::after, .button.button-large.button-with-stroke.added:not(:disabled):hover::after, .button.button-large.button-with-stroke.active.contextmenu-active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-with-stroke.added.contextmenu-active::after, .button.button-large.button-with-stroke.added:not(:disabled):hover::after, .button.button-large.button-with-stroke.active.contextmenu-active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke.added.contextmenu-active::after, .button.button-large.button-with-stroke.added:not(:disabled):hover::after, .button.button-large.button-with-stroke.active.contextmenu-active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-with-stroke.added:not(:disabled):hover:active, .button.button-large.button-with-stroke.active:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-with-stroke.added:not(:disabled):hover:active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-with-stroke.added::after, .button.button-large.button-with-stroke.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-large.button-with-stroke.added::after, .button.button-large.button-with-stroke.active::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-large.button-with-stroke.added::after, .button.button-large.button-with-stroke.active::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-with-stroke.added.contextmenu-active::after, .button.button-large.button-with-stroke.added:not(:disabled):hover::after, .button.button-large.button-with-stroke.active.contextmenu-active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
.button.button-large.button-with-stroke.added.contextmenu-active::after, .button.button-large.button-with-stroke.added:not(:disabled):hover::after, .button.button-large.button-with-stroke.active.contextmenu-active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
}
|
||
.button.button-large.button-with-stroke.added:not(:disabled):hover:active, .button.button-large.button-with-stroke.active:not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-large.button-with-stroke.added:not(:disabled):hover:active::after, .button.button-large.button-with-stroke.active:not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-with-stroke.added.contextmenu-active, .button.button-large.button-with-stroke.added:not(:disabled):hover, .button.button-large.button-with-stroke.active.contextmenu-active, .button.button-large.button-with-stroke.active:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-large.button-facebook {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
font-size: 14px;
|
||
}
|
||
.button.button-large.button-facebook {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: #3b5998;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-large.button-facebook {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
|
||
.button.button-large.button-facebook .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.button.button-large.button-facebook.contextmenu-active, .button.button-large.button-facebook:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-large.button-facebook.contextmenu-active, .button.button-large.button-facebook:not(:disabled):hover {
|
||
background-color: #3762ba;
|
||
}
|
||
.button.button-large.button-facebook:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-large.button-facebook:not(:disabled):hover:active {
|
||
background: #365284;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-facebook:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-facebook {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-facebook::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-large.button-facebook::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-facebook::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-facebook.contextmenu-active, .button.button-large.button-facebook:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-facebook.contextmenu-active, .button.button-large.button-facebook:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-facebook.contextmenu-active, .button.button-large.button-facebook:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-facebook.contextmenu-active::after, .button.button-large.button-facebook:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-facebook.contextmenu-active::after, .button.button-large.button-facebook:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-facebook.contextmenu-active::after, .button.button-large.button-facebook:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-facebook:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-facebook:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-facebook:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-facebook:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
}
|
||
.button.button-large.button-icon-only {
|
||
height: 48px;
|
||
line-height: 46px;
|
||
color: #b3b3b3;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
width: 48px;
|
||
font-size: 14px;
|
||
}
|
||
.button.button-large.button-icon-only {
|
||
padding-top: 1px;
|
||
border-radius: 24px;
|
||
background: transparent;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-large.button-icon-only {
|
||
padding-left: 48px;
|
||
padding-right: 48px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
|
||
.button.button-large.button-icon-only .b-alt-text {
|
||
margin-top: -46px;
|
||
}
|
||
.button.button-large.button-icon-only.contextmenu-active, .button.button-large.button-icon-only:not(:disabled):hover {
|
||
color: #ffffff;
|
||
}
|
||
.button.button-large.button-icon-only.contextmenu-active, .button.button-large.button-icon-only:not(:disabled):hover {
|
||
background-color: transparent;
|
||
}
|
||
.button.button-large.button-icon-only:not(:disabled):hover:active {
|
||
color: #b3b3b3;
|
||
}
|
||
.button.button-large.button-icon-only:not(:disabled):hover:active {
|
||
background: transparent;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-only:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-only {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-icon-only::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-large.button-icon-only::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-only::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-icon-only.contextmenu-active, .button.button-large.button-icon-only:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-icon-only.contextmenu-active, .button.button-large.button-icon-only:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-only.contextmenu-active, .button.button-large.button-icon-only:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-icon-only.contextmenu-active::after, .button.button-large.button-icon-only:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-icon-only.contextmenu-active::after, .button.button-large.button-icon-only:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-only.contextmenu-active::after, .button.button-large.button-icon-only:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-icon-only:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-icon-only:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-icon-only::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
text-align: left/* rtl:ignore */;
|
||
line-height: 48px;
|
||
font-size: 24px;
|
||
padding-left: 12px /* rtl:ignore */;
|
||
width: calc(100% - 12px);
|
||
}
|
||
.button.button-large.button-icon-only::before {
|
||
border-radius: 500px;
|
||
}
|
||
.button.button-large.button-icon-only::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.button.button-large.button-icon-only.button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1C8";
|
||
font-size: 24px;
|
||
line-height: 48px;
|
||
}
|
||
.button.button-large.button-icon-only.button-play.playing:not(:hover), .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover), .card.playing .button.button-large.button-icon-only.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-large.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-large.button-icon-only.button-play.playing:not(:hover).contextmenu-active, .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-only.button-play.playing:not(:hover).contextmenu-active, .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-icon-only.button-play.playing:not(:hover)::before, .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover)::before, .card.playing .button.button-large.button-icon-only.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1DB";
|
||
font-size: 24px;
|
||
line-height: 48px;
|
||
}
|
||
.button.button-large.button-icon-only.button-play.playing:hover::before, .tl-row.playing .button.button-large.button-icon-only.button-play:hover::before, .card.playing .button.button-large.button-icon-only.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1D3";
|
||
font-size: 24px;
|
||
line-height: 48px;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover), .card.playing.button.button-large.button-icon-only.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover)::after,
|
||
.card.playing.button.button-large.button-icon-only.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover)::after, .card.playing.button.button-large.button-icon-only.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover)::after, .card.playing.button.button-large.button-icon-only.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover)::before,
|
||
.card.playing.button.button-large.button-icon-only.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1DB";
|
||
font-size: 24px;
|
||
line-height: 48px;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-only.button-play:hover::before,
|
||
.card.playing.button.button-large.button-icon-only.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1D3";
|
||
font-size: 24px;
|
||
line-height: 48px;
|
||
}
|
||
|
||
.button.button-large.button-icon-only.active {
|
||
color: #1ed760;
|
||
}
|
||
.button.button-large.button-icon-only.active.contextmenu-active, .button.button-large.button-icon-only.active:not(:disabled):hover {
|
||
color: #1df369;
|
||
}
|
||
.button.button-large.button-icon-only.active:not(:disabled):hover:active {
|
||
color: #18ac4d;
|
||
}
|
||
.button.button-large.button-icon-only.drop-target-active {
|
||
color: #000000;
|
||
}
|
||
.button.button-large.button-icon-only.drop-target-active {
|
||
background-color: #1ed760;
|
||
}
|
||
.button.button-large.button-icon-only.drop-target-active.contextmenu-active, .button.button-large.button-icon-only.drop-target-active:not(:disabled):hover {
|
||
color: #000000;
|
||
}
|
||
.button.button-large.button-icon-only.drop-target-active:not(:disabled):hover:active {
|
||
color: black;
|
||
}
|
||
.button.button-large.button-icon-only.drop-target-active.contextmenu-active, .button.button-large.button-icon-only.drop-target-active:not(:disabled):hover {
|
||
background-color: #1ed760;
|
||
}
|
||
.button.button-large.button-icon-with-stroke {
|
||
height: 48px;
|
||
line-height: 46px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
width: 48px;
|
||
font-size: 14px;
|
||
}
|
||
.button.button-large.button-icon-with-stroke {
|
||
padding-top: 1px;
|
||
border-radius: 24px;
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-large.button-icon-with-stroke {
|
||
padding-left: 48px;
|
||
padding-right: 48px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
|
||
.button.button-large.button-icon-with-stroke .b-alt-text {
|
||
margin-top: -46px;
|
||
}
|
||
.button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
|
||
background-color: rgba(24, 24, 24, 0.7);
|
||
}
|
||
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active {
|
||
color: #b3b3b3;
|
||
}
|
||
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active {
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-with-stroke {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-icon-with-stroke::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-large.button-icon-with-stroke::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-with-stroke::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-icon-with-stroke.contextmenu-active::after, .button.button-large.button-icon-with-stroke:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-large.button-icon-with-stroke.contextmenu-active::after, .button.button-large.button-icon-with-stroke:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-with-stroke.contextmenu-active::after, .button.button-large.button-icon-with-stroke:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-large.button-icon-with-stroke::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-large.button-icon-with-stroke::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-large.button-icon-with-stroke::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-icon-with-stroke.contextmenu-active::after, .button.button-large.button-icon-with-stroke:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
.button.button-large.button-icon-with-stroke.contextmenu-active::after, .button.button-large.button-icon-with-stroke:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
}
|
||
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-with-stroke.contextmenu-active, .button.button-large.button-icon-with-stroke:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-large.button-icon-with-stroke::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
text-align: left/* rtl:ignore */;
|
||
line-height: 48px;
|
||
font-size: 24px;
|
||
padding-left: 12px /* rtl:ignore */;
|
||
width: calc(100% - 12px);
|
||
}
|
||
.button.button-large.button-icon-with-stroke::before {
|
||
border-radius: 500px;
|
||
}
|
||
.button.button-large.button-icon-with-stroke::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.button.button-large.button-icon-with-stroke.button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1C8";
|
||
font-size: 24px;
|
||
line-height: 48px;
|
||
}
|
||
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover), .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover), .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-large.button-icon-with-stroke.button-play.playing:not(:hover)::before, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::before, .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1DB";
|
||
font-size: 24px;
|
||
line-height: 48px;
|
||
}
|
||
.button.button-large.button-icon-with-stroke.button-play.playing:hover::before, .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:hover::before, .card.playing .button.button-large.button-icon-with-stroke.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1D3";
|
||
font-size: 24px;
|
||
line-height: 48px;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover), .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after,
|
||
.card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::before,
|
||
.card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1DB";
|
||
font-size: 24px;
|
||
line-height: 48px;
|
||
}
|
||
.tl-row.playing.button.button-large.button-icon-with-stroke.button-play:hover::before,
|
||
.card.playing.button.button-large.button-icon-with-stroke.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1D3";
|
||
font-size: 24px;
|
||
line-height: 48px;
|
||
}
|
||
|
||
.button.button-small.button-green {
|
||
height: 24px;
|
||
line-height: 22px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
|
||
.button.button-small.button-green {
|
||
padding-top: 1px;
|
||
border-radius: 12px;
|
||
background: #1db954;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
|
||
.button.button-small.button-green {
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
}
|
||
|
||
|
||
|
||
.button.button-small.button-green .b-alt-text {
|
||
margin-top: -22px;
|
||
}
|
||
.button.button-small.button-green.contextmenu-active, .button.button-small.button-green:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-small.button-green.contextmenu-active, .button.button-small.button-green:not(:disabled):hover {
|
||
background-color: #1ed760;
|
||
}
|
||
.button.button-small.button-green:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-small.button-green:not(:disabled):hover:active {
|
||
background: #14833b;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-green:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-green {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-green::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-green::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-green::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-green.contextmenu-active, .button.button-small.button-green:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-green.contextmenu-active, .button.button-small.button-green:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-green.contextmenu-active, .button.button-small.button-green:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-green.contextmenu-active::after, .button.button-small.button-green:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-green.contextmenu-active::after, .button.button-small.button-green:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-green.contextmenu-active::after, .button.button-small.button-green:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-green:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-green:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-green:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-green:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-small.button-white {
|
||
height: 24px;
|
||
line-height: 22px;
|
||
color: #000000;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-white {
|
||
padding-top: 1px;
|
||
border-radius: 12px;
|
||
background: #ffffff;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-small.button-white {
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
}
|
||
|
||
|
||
.button.button-small.button-white .b-alt-text {
|
||
margin-top: -22px;
|
||
}
|
||
.button.button-small.button-white.contextmenu-active, .button.button-small.button-white:not(:disabled):hover {
|
||
color: #000000;
|
||
}
|
||
.button.button-small.button-white.contextmenu-active, .button.button-small.button-white:not(:disabled):hover {
|
||
background-color: #ffffff;
|
||
}
|
||
.button.button-small.button-white:not(:disabled):hover:active {
|
||
color: #000000;
|
||
}
|
||
.button.button-small.button-white:not(:disabled):hover:active {
|
||
background: #b3b3b3;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-white:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-white {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-white::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-white::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-white::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-white.contextmenu-active, .button.button-small.button-white:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-white.contextmenu-active, .button.button-small.button-white:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-white.contextmenu-active, .button.button-small.button-white:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-white.contextmenu-active::after, .button.button-small.button-white:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-white.contextmenu-active::after, .button.button-small.button-white:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-white.contextmenu-active::after, .button.button-small.button-white:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-white:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-white:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-white:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-white:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-small.button-blue {
|
||
height: 24px;
|
||
line-height: 22px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-blue {
|
||
padding-top: 1px;
|
||
border-radius: 12px;
|
||
background: #2e77d0;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-small.button-blue {
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
}
|
||
|
||
|
||
.button.button-small.button-blue .b-alt-text {
|
||
margin-top: -22px;
|
||
}
|
||
.button.button-small.button-blue.contextmenu-active, .button.button-small.button-blue:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-small.button-blue.contextmenu-active, .button.button-small.button-blue:not(:disabled):hover {
|
||
background-color: #4687d6;
|
||
}
|
||
.button.button-small.button-blue:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-small.button-blue:not(:disabled):hover:active {
|
||
background: #1d4c85;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-blue:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-blue {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-blue::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-blue::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-blue::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-blue.contextmenu-active, .button.button-small.button-blue:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-blue.contextmenu-active, .button.button-small.button-blue:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-blue.contextmenu-active, .button.button-small.button-blue:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-blue.contextmenu-active::after, .button.button-small.button-blue:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-blue.contextmenu-active::after, .button.button-small.button-blue:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-blue.contextmenu-active::after, .button.button-small.button-blue:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-blue:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-blue:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-blue:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-blue:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-small.button-red {
|
||
height: 24px;
|
||
line-height: 22px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-red {
|
||
padding-top: 1px;
|
||
border-radius: 12px;
|
||
background: #cd1a2b;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-small.button-red {
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
}
|
||
|
||
|
||
.button.button-small.button-red .b-alt-text {
|
||
margin-top: -22px;
|
||
}
|
||
.button.button-small.button-red.contextmenu-active, .button.button-small.button-red:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-small.button-red.contextmenu-active, .button.button-small.button-red:not(:disabled):hover {
|
||
background-color: #e22134;
|
||
}
|
||
.button.button-small.button-red:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-small.button-red:not(:disabled):hover:active {
|
||
background: #941320;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-red:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-red {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-red::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-red::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-red::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-red.contextmenu-active, .button.button-small.button-red:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-red.contextmenu-active, .button.button-small.button-red:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-red.contextmenu-active, .button.button-small.button-red:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-red.contextmenu-active::after, .button.button-small.button-red:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-red.contextmenu-active::after, .button.button-small.button-red:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-red.contextmenu-active::after, .button.button-small.button-red:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-red:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-red:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-red:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-red:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-small.button-gray {
|
||
height: 24px;
|
||
line-height: 22px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-gray {
|
||
padding-top: 1px;
|
||
border-radius: 12px;
|
||
background: #404040;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-small.button-gray {
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
}
|
||
|
||
|
||
.button.button-small.button-gray .b-alt-text {
|
||
margin-top: -22px;
|
||
}
|
||
.button.button-small.button-gray.contextmenu-active, .button.button-small.button-gray:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-small.button-gray.contextmenu-active, .button.button-small.button-gray:not(:disabled):hover {
|
||
background-color: #535353;
|
||
}
|
||
.button.button-small.button-gray:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-small.button-gray:not(:disabled):hover:active {
|
||
background: #333333;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-gray:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-gray {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-gray::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-gray::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-gray::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-gray.contextmenu-active, .button.button-small.button-gray:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-gray.contextmenu-active, .button.button-small.button-gray:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-gray.contextmenu-active, .button.button-small.button-gray:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-gray.contextmenu-active::after, .button.button-small.button-gray:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-gray.contextmenu-active::after, .button.button-small.button-gray:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-gray.contextmenu-active::after, .button.button-small.button-gray:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-gray:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-gray:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-gray:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-gray:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-small.button-with-stroke {
|
||
height: 24px;
|
||
line-height: 22px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-with-stroke {
|
||
padding-top: 1px;
|
||
border-radius: 12px;
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-small.button-with-stroke {
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
}
|
||
|
||
|
||
.button.button-small.button-with-stroke .b-alt-text {
|
||
margin-top: -22px;
|
||
}
|
||
.button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
|
||
background-color: rgba(24, 24, 24, 0.7);
|
||
}
|
||
.button.button-small.button-with-stroke:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-small.button-with-stroke:not(:disabled):hover:active {
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-with-stroke::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-with-stroke::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-with-stroke.contextmenu-active::after, .button.button-small.button-with-stroke:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-with-stroke.contextmenu-active::after, .button.button-small.button-with-stroke:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke.contextmenu-active::after, .button.button-small.button-with-stroke:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-with-stroke:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-with-stroke:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-with-stroke::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-small.button-with-stroke::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-small.button-with-stroke::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-with-stroke.contextmenu-active::after, .button.button-small.button-with-stroke:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
.button.button-small.button-with-stroke.contextmenu-active::after, .button.button-small.button-with-stroke:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
}
|
||
.button.button-small.button-with-stroke:not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-small.button-with-stroke:not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke.contextmenu-active, .button.button-small.button-with-stroke:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-small.button-with-stroke.added, .button.button-small.button-with-stroke.active {
|
||
height: 24px;
|
||
line-height: 22px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-with-stroke.added, .button.button-small.button-with-stroke.active {
|
||
padding-top: 1px;
|
||
border-radius: 12px;
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-small.button-with-stroke.added, .button.button-small.button-with-stroke.active {
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
}
|
||
|
||
|
||
.button.button-small.button-with-stroke.added .b-alt-text, .button.button-small.button-with-stroke.active .b-alt-text {
|
||
margin-top: -22px;
|
||
}
|
||
.button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
|
||
background-color: rgba(24, 24, 24, 0.7);
|
||
}
|
||
.button.button-small.button-with-stroke.added:not(:disabled):hover:active, .button.button-small.button-with-stroke.active:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-small.button-with-stroke.added:not(:disabled):hover:active, .button.button-small.button-with-stroke.active:not(:disabled):hover:active {
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke.added:not(:disabled):hover:active, .button.button-small.button-with-stroke.active:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke.added, .button.button-small.button-with-stroke.active {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-with-stroke.added::after, .button.button-small.button-with-stroke.active::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-with-stroke.added::after, .button.button-small.button-with-stroke.active::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke.added::after, .button.button-small.button-with-stroke.active::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-with-stroke.added.contextmenu-active::after, .button.button-small.button-with-stroke.added:not(:disabled):hover::after, .button.button-small.button-with-stroke.active.contextmenu-active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-with-stroke.added.contextmenu-active::after, .button.button-small.button-with-stroke.added:not(:disabled):hover::after, .button.button-small.button-with-stroke.active.contextmenu-active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke.added.contextmenu-active::after, .button.button-small.button-with-stroke.added:not(:disabled):hover::after, .button.button-small.button-with-stroke.active.contextmenu-active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-with-stroke.added:not(:disabled):hover:active, .button.button-small.button-with-stroke.active:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-with-stroke.added:not(:disabled):hover:active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-with-stroke.added::after, .button.button-small.button-with-stroke.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-small.button-with-stroke.added::after, .button.button-small.button-with-stroke.active::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-small.button-with-stroke.added::after, .button.button-small.button-with-stroke.active::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-with-stroke.added.contextmenu-active::after, .button.button-small.button-with-stroke.added:not(:disabled):hover::after, .button.button-small.button-with-stroke.active.contextmenu-active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
.button.button-small.button-with-stroke.added.contextmenu-active::after, .button.button-small.button-with-stroke.added:not(:disabled):hover::after, .button.button-small.button-with-stroke.active.contextmenu-active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
}
|
||
.button.button-small.button-with-stroke.added:not(:disabled):hover:active, .button.button-small.button-with-stroke.active:not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-small.button-with-stroke.added:not(:disabled):hover:active::after, .button.button-small.button-with-stroke.active:not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-with-stroke.added.contextmenu-active, .button.button-small.button-with-stroke.added:not(:disabled):hover, .button.button-small.button-with-stroke.active.contextmenu-active, .button.button-small.button-with-stroke.active:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-small.button-facebook {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-facebook {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: #3b5998;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-small.button-facebook {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
|
||
.button.button-small.button-facebook .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.button.button-small.button-facebook.contextmenu-active, .button.button-small.button-facebook:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.button.button-small.button-facebook.contextmenu-active, .button.button-small.button-facebook:not(:disabled):hover {
|
||
background-color: #3762ba;
|
||
}
|
||
.button.button-small.button-facebook:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.button.button-small.button-facebook:not(:disabled):hover:active {
|
||
background: #365284;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-facebook:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-facebook {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-facebook::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-facebook::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-facebook::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-facebook.contextmenu-active, .button.button-small.button-facebook:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-facebook.contextmenu-active, .button.button-small.button-facebook:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-facebook.contextmenu-active, .button.button-small.button-facebook:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-facebook.contextmenu-active::after, .button.button-small.button-facebook:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-facebook.contextmenu-active::after, .button.button-small.button-facebook:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-facebook.contextmenu-active::after, .button.button-small.button-facebook:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-facebook:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-facebook:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-facebook:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-facebook:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
}
|
||
.button.button-small.button-icon-only {
|
||
height: 24px;
|
||
line-height: 22px;
|
||
color: #b3b3b3;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
width: 24px;
|
||
}
|
||
.button.button-small.button-icon-only {
|
||
padding-top: 1px;
|
||
border-radius: 12px;
|
||
background: transparent;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
.button.button-small.button-icon-only {
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
|
||
.button.button-small.button-icon-only .b-alt-text {
|
||
margin-top: -22px;
|
||
}
|
||
.button.button-small.button-icon-only.contextmenu-active, .button.button-small.button-icon-only:not(:disabled):hover {
|
||
color: #ffffff;
|
||
}
|
||
.button.button-small.button-icon-only.contextmenu-active, .button.button-small.button-icon-only:not(:disabled):hover {
|
||
background-color: transparent;
|
||
}
|
||
.button.button-small.button-icon-only:not(:disabled):hover:active {
|
||
color: #b3b3b3;
|
||
}
|
||
.button.button-small.button-icon-only:not(:disabled):hover:active {
|
||
background: transparent;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-only:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-only {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-icon-only::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-icon-only::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-only::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-icon-only.contextmenu-active, .button.button-small.button-icon-only:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-icon-only.contextmenu-active, .button.button-small.button-icon-only:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-only.contextmenu-active, .button.button-small.button-icon-only:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-icon-only.contextmenu-active::after, .button.button-small.button-icon-only:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-icon-only.contextmenu-active::after, .button.button-small.button-icon-only:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-only.contextmenu-active::after, .button.button-small.button-icon-only:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-icon-only:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-icon-only:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-icon-only::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
text-align: left/* rtl:ignore */;
|
||
line-height: 24px;
|
||
font-size: 12px;
|
||
padding-left: 6px /* rtl:ignore */;
|
||
width: calc(100% - 6px);
|
||
}
|
||
.button.button-small.button-icon-only::before {
|
||
border-radius: 500px;
|
||
}
|
||
.button.button-small.button-icon-only::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.button.button-small.button-icon-only.button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f132";
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
}
|
||
.button.button-small.button-icon-only.button-play.playing:not(:hover), .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover), .card.playing .button.button-small.button-icon-only.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-small.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-icon-only.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover)::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-small.button-icon-only.button-play.playing:not(:hover).contextmenu-active, .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-only.button-play.playing:not(:hover).contextmenu-active, .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-icon-only.button-play.playing:not(:hover)::before, .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover)::before, .card.playing .button.button-small.button-icon-only.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
}
|
||
.button.button-small.button-icon-only.button-play.playing:hover::before, .tl-row.playing .button.button-small.button-icon-only.button-play:hover::before, .card.playing .button.button-small.button-icon-only.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover), .card.playing.button.button-small.button-icon-only.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover)::after,
|
||
.card.playing.button.button-small.button-icon-only.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover)::after, .card.playing.button.button-small.button-icon-only.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover)::after, .card.playing.button.button-small.button-icon-only.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover)::before,
|
||
.card.playing.button.button-small.button-icon-only.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-only.button-play:hover::before,
|
||
.card.playing.button.button-small.button-icon-only.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.button.button-small.button-icon-only.active {
|
||
color: #1ed760;
|
||
}
|
||
.button.button-small.button-icon-only.active.contextmenu-active, .button.button-small.button-icon-only.active:not(:disabled):hover {
|
||
color: #1df369;
|
||
}
|
||
.button.button-small.button-icon-only.active:not(:disabled):hover:active {
|
||
color: #18ac4d;
|
||
}
|
||
.button.button-small.button-icon-only.drop-target-active {
|
||
color: #000000;
|
||
}
|
||
.button.button-small.button-icon-only.drop-target-active {
|
||
background-color: #1ed760;
|
||
}
|
||
.button.button-small.button-icon-only.drop-target-active.contextmenu-active, .button.button-small.button-icon-only.drop-target-active:not(:disabled):hover {
|
||
color: #000000;
|
||
}
|
||
.button.button-small.button-icon-only.drop-target-active:not(:disabled):hover:active {
|
||
color: black;
|
||
}
|
||
.button.button-small.button-icon-only.drop-target-active.contextmenu-active, .button.button-small.button-icon-only.drop-target-active:not(:disabled):hover {
|
||
background-color: #1ed760;
|
||
}
|
||
.button.button-small.button-icon-with-stroke {
|
||
height: 24px;
|
||
line-height: 22px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
width: 24px;
|
||
}
|
||
.button.button-small.button-icon-with-stroke {
|
||
padding-top: 1px;
|
||
border-radius: 12px;
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-small.button-icon-with-stroke {
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
|
||
.button.button-small.button-icon-with-stroke .b-alt-text {
|
||
margin-top: -22px;
|
||
}
|
||
.button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
|
||
background-color: rgba(24, 24, 24, 0.7);
|
||
}
|
||
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active {
|
||
color: #b3b3b3;
|
||
}
|
||
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active {
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-with-stroke {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-icon-with-stroke::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.button.button-small.button-icon-with-stroke::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-with-stroke::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-icon-with-stroke.contextmenu-active::after, .button.button-small.button-icon-with-stroke:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.button.button-small.button-icon-with-stroke.contextmenu-active::after, .button.button-small.button-icon-with-stroke:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-with-stroke.contextmenu-active::after, .button.button-small.button-icon-with-stroke:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.button.button-small.button-icon-with-stroke::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-small.button-icon-with-stroke::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.button.button-small.button-icon-with-stroke::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-icon-with-stroke.contextmenu-active::after, .button.button-small.button-icon-with-stroke:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
.button.button-small.button-icon-with-stroke.contextmenu-active::after, .button.button-small.button-icon-with-stroke:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
}
|
||
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-with-stroke.contextmenu-active, .button.button-small.button-icon-with-stroke:not(:disabled):hover {
|
||
transform: scale(1.0833333333);
|
||
}
|
||
}
|
||
.button.button-small.button-icon-with-stroke::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
text-align: left/* rtl:ignore */;
|
||
line-height: 24px;
|
||
font-size: 12px;
|
||
padding-left: 6px /* rtl:ignore */;
|
||
width: calc(100% - 6px);
|
||
}
|
||
.button.button-small.button-icon-with-stroke::before {
|
||
border-radius: 500px;
|
||
}
|
||
.button.button-small.button-icon-with-stroke::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.button.button-small.button-icon-with-stroke.button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f132";
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
}
|
||
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover), .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover), .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover)::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.button.button-small.button-icon-with-stroke.button-play.playing:not(:hover)::before, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::before, .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
}
|
||
.button.button-small.button-icon-with-stroke.button-play.playing:hover::before, .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:hover::before, .card.playing .button.button-small.button-icon-with-stroke.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover), .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after,
|
||
.card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::before,
|
||
.card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
}
|
||
.tl-row.playing.button.button-small.button-icon-with-stroke.button-play:hover::before,
|
||
.card.playing.button.button-small.button-icon-with-stroke.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.b-alt-text {
|
||
opacity: 0;
|
||
}
|
||
|
||
.b-play-text,
|
||
.b-pause-text,
|
||
.b-add-text,
|
||
.b-added-text,
|
||
.b-remove-text {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
|
||
.b-play-text, .b-pause-text, .b-add-text, .b-added-text, .b-remove-text {
|
||
transition-property: opacity;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.b-play-text, .b-pause-text, .b-add-text, .b-added-text, .b-remove-text {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
|
||
.button:hover .b-play-text,
|
||
.button:hover .b-pause-text,
|
||
.button:hover .b-add-text,
|
||
.button:hover .b-added-text,
|
||
.button:hover .b-remove-text {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
|
||
.button:hover .b-play-text, .button:hover .b-pause-text, .button:hover .b-add-text, .button:hover .b-added-text, .button:hover .b-remove-text {
|
||
transition-property: opacity;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.button:hover .b-play-text, .button:hover .b-pause-text, .button:hover .b-add-text, .button:hover .b-added-text, .button:hover .b-remove-text {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
|
||
.button-play.button-icon-only .b-play-text,
|
||
.button-play.button-icon-only .b-pause-text, .button-play.button-icon-with-stroke .b-play-text,
|
||
.button-play.button-icon-with-stroke .b-pause-text {
|
||
display: none;
|
||
}
|
||
|
||
.button-play.playing .b-play-text {
|
||
opacity: 0;
|
||
}
|
||
.button-play.playing .b-pause-text {
|
||
opacity: 1;
|
||
}
|
||
|
||
.button-add.button-icon-only .b-add-text,
|
||
.button-add.button-icon-only .b-added-text,
|
||
.button-add.button-icon-only .b-remove-text, .button-add.button-icon-with-stroke .b-add-text,
|
||
.button-add.button-icon-with-stroke .b-added-text,
|
||
.button-add.button-icon-with-stroke .b-remove-text {
|
||
display: none;
|
||
}
|
||
.button-add.button-icon-only::before, .button-add.button-icon-with-stroke::before {
|
||
content: "\f138";
|
||
}
|
||
|
||
.button-header-add::before, .button-header-add.just-changed::before {
|
||
content: "\f320";
|
||
}
|
||
.button-header-add.added::before, .button-header-add.added:hover::before, .button-header-add.added.just-changed::before {
|
||
content: "\f322";
|
||
}
|
||
|
||
.button-more::before {
|
||
content: "\f12c";
|
||
}
|
||
|
||
.button-thumbs-down::before {
|
||
content: "\f14e";
|
||
}
|
||
|
||
.button-thumbs-up::before {
|
||
content: "\f150";
|
||
}
|
||
|
||
.button-link {
|
||
font-size: inherit;
|
||
font-weight: bold;
|
||
vertical-align: inherit;
|
||
letter-spacing: inherit;
|
||
color: inherit;
|
||
text-transform: none;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.button-link {
|
||
padding: inherit;
|
||
margin: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.button.spoticon-heart-active-16:disabled {
|
||
opacity: 1;
|
||
}
|
||
|
||
.added .button-add .b-added-text,
|
||
.button-add.added .b-added-text {
|
||
opacity: 1;
|
||
}
|
||
.added .button-add .b-add-text,
|
||
.button-add.added .b-add-text {
|
||
opacity: 0;
|
||
}
|
||
.added .button-add.button-icon-only::before, .added .button-add.button-icon-with-stroke::before,
|
||
.button-add.added.button-icon-only::before,
|
||
.button-add.added.button-icon-with-stroke::before {
|
||
content: "\f10a";
|
||
}
|
||
.added .button-add.button-icon-only:hover::before, .added .button-add.button-icon-with-stroke:hover::before,
|
||
.button-add.added.button-icon-only:hover::before,
|
||
.button-add.added.button-icon-with-stroke:hover::before {
|
||
content: "\f160";
|
||
}
|
||
.added .button-add:hover .b-remove-text,
|
||
.button-add.added:hover .b-remove-text {
|
||
opacity: 1;
|
||
}
|
||
.added .button-add:hover .b-added-text,
|
||
.button-add.added:hover .b-added-text {
|
||
opacity: 0;
|
||
}
|
||
.added .button-add.just-changed, .added .button-add.stay-added, .button-add.added.just-changed, .button-add.added.stay-added {
|
||
border-color: #1db954;
|
||
}
|
||
.added .button-add.just-changed .b-remove-text, .added .button-add.stay-added .b-remove-text,
|
||
.button-add.added.just-changed .b-remove-text,
|
||
.button-add.added.stay-added .b-remove-text {
|
||
opacity: 0;
|
||
}
|
||
.added .button-add.just-changed .b-added-text, .added .button-add.stay-added .b-added-text,
|
||
.button-add.added.just-changed .b-added-text,
|
||
.button-add.added.stay-added .b-added-text {
|
||
opacity: 1;
|
||
}
|
||
.added .button-add.just-changed.button-icon-only::before, .added .button-add.just-changed.button-icon-with-stroke::before, .added .button-add.stay-added.button-icon-only::before, .added .button-add.stay-added.button-icon-with-stroke::before,
|
||
.button-add.added.just-changed.button-icon-only::before,
|
||
.button-add.added.just-changed.button-icon-with-stroke::before,
|
||
.button-add.added.stay-added.button-icon-only::before,
|
||
.button-add.added.stay-added.button-icon-with-stroke::before {
|
||
content: "\f10a";
|
||
}
|
||
.added .button-add:not(.button-icon-only):not(.button-icon-with-stroke),
|
||
.button-add.added:not(.button-icon-only):not(.button-icon-with-stroke) {
|
||
color: #1ed760;
|
||
}
|
||
.added .button-add:not(.button-icon-only):not(.button-icon-with-stroke).contextmenu-active, .added .button-add:not(.button-icon-only):not(.button-icon-with-stroke):not(:disabled):hover,
|
||
.button-add.added:not(.button-icon-only):not(.button-icon-with-stroke).contextmenu-active,
|
||
.button-add.added:not(.button-icon-only):not(.button-icon-with-stroke):not(:disabled):hover {
|
||
color: #1ed760;
|
||
}
|
||
.added .button-add:not(.button-icon-only):not(.button-icon-with-stroke):not(:disabled):hover:active,
|
||
.button-add.added:not(.button-icon-only):not(.button-icon-with-stroke):not(:disabled):hover:active {
|
||
color: #18ac4d;
|
||
}
|
||
|
||
.added .button.button-icon-only.button-add {
|
||
color: #ffffff;
|
||
}
|
||
.added .button.button-icon-only.button-add::before {
|
||
content: "\f322";
|
||
}
|
||
|
||
.unlike-removes-entity .added .button-add:not(.just-changed):hover::before {
|
||
content: "\f160";
|
||
}
|
||
|
||
button.button-icon-only.button-add {
|
||
color: #ffffff;
|
||
}
|
||
|
||
/**
|
||
* Standard buttons
|
||
*
|
||
* NOTE: Any button title must be in a `span` element and the span must not have
|
||
* spaces before or after it. This is to stop IE's fake depressing of the
|
||
* buttons when clicked.
|
||
*
|
||
* Markup: <button type="button" class="button {$modifiers}">
|
||
* Some button
|
||
* </button>
|
||
* <button type="button" class="button button-primary {$modifiers}">
|
||
* Some button
|
||
* </button>
|
||
*
|
||
* Styleguide 25.1
|
||
*/
|
||
/**
|
||
* Icon buttons
|
||
*
|
||
* Styleguide 25.2
|
||
*/
|
||
/**
|
||
* With text
|
||
*
|
||
* Markup: <button type="button" class="button spoticon-radio-16">
|
||
* Start Radio
|
||
* </button>
|
||
*
|
||
* Styleguide 25.2.1
|
||
*/
|
||
/**
|
||
* Without text
|
||
*
|
||
* Markup: <button type="button" class="button button-icon-only spoticon-more-16"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-plus-16"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-check-16"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-radio-16"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-pause-16"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-play-16"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-thumbs-down-16"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-thumbs-up-16"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-heart-16"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-ban-16"></button>
|
||
*
|
||
* Styleguide 25.2.2
|
||
*/
|
||
/**
|
||
* Without text and circle
|
||
*
|
||
* Markup: <button type="button" class="button button-icon-only button-no-border spoticon-more-16"></button>
|
||
* <button type="button" class="button button-icon-only button-no-border spoticon-plus-16"></button>
|
||
* <button type="button" class="button button-icon-only button-no-border spoticon-check-16"></button>
|
||
* <button type="button" class="button button-icon-only button-no-border spoticon-radio-16"></button>
|
||
* <button type="button" class="button button-icon-only button-no-border spoticon-pause-16"></button>
|
||
* <button type="button" class="button button-icon-only button-no-border spoticon-play-16"></button>
|
||
* <button type="button" class="button button-icon-only button-no-border spoticon-thumbs-down-16"></button>
|
||
* <button type="button" class="button button-icon-only button-no-border spoticon-thumbs-up-16"></button>
|
||
* <button type="button" class="button button-icon-only button-no-border spoticon-heart-16"></button>
|
||
* <button type="button" class="button button-icon-only button-no-border spoticon-ban-16"></button>
|
||
*
|
||
* Styleguide 25.2.3
|
||
*/
|
||
/**
|
||
* Specific buttons
|
||
*
|
||
* Styleguide 25.3
|
||
*/
|
||
/**
|
||
* Play & Radio
|
||
*
|
||
* The play button will always have a playing/paused indicator, a play button should never just be text.
|
||
* Most of the time you probably want play to be the primary action too, so add .button-primary.
|
||
*
|
||
* Markup:
|
||
* <button type="button" class="button button-play">
|
||
* <div class="b-play-text">Play</div>
|
||
* <div class="b-radio-text">Start Radio</div>
|
||
* <div class="b-pause-text b-alt-text">Pause</div>
|
||
* </button>
|
||
* <button type="button" class="button button-play button-icon-only">
|
||
* <div class="b-play-text">Play</div>
|
||
* <div class="b-radio-text">Start Radio</div>
|
||
* <div class="b-pause-text b-alt-text">Pause</div>
|
||
* </button>
|
||
* <button type="button" class="button button-radio">
|
||
* <div class="b-play-text">Play</div>
|
||
* <div class="b-radio-text">Start Radio</div>
|
||
* <div class="b-pause-text b-alt-text">Pause</div>
|
||
* </button>
|
||
* <button type="button" class="button button-radio button-icon-only">
|
||
* <div class="b-play-text">Play</div>
|
||
* <div class="b-radio-text">Start Radio</div>
|
||
* <div class="b-pause-text b-alt-text">Pause</div>
|
||
* </button>
|
||
* <button type="button" class="button button-play button-primary">
|
||
* <div class="b-play-text">Play</div>
|
||
* <div class="b-radio-text">Start Radio</div>
|
||
* <div class="b-pause-text b-alt-text">Pause</div>
|
||
* </button>
|
||
*
|
||
* Styleguide 25.3.1
|
||
*/
|
||
/**
|
||
* Save / Follow
|
||
*
|
||
* Markup:
|
||
* <button type="button" class="button button-add" data-button="add">
|
||
* <div class="b-add-text">Save</div>
|
||
* <div class="b-added-text b-alt-text">Saved</div>
|
||
* <div class="b-remove-text b-alt-text">Remove</div>
|
||
* </button>
|
||
* <button type="button" class="button button-add button-icon-only" data-button="add">
|
||
* <div class="b-add-text">Save</div>
|
||
* <div class="b-added-text b-alt-text">Saved</div>
|
||
* <div class="b-remove-text b-alt-text">Remove</div>
|
||
* </button>
|
||
* <button type="button" class="button button-add" data-button="add">
|
||
* <div class="b-add-text">Follow</div>
|
||
* <div class="b-added-text b-alt-text">Following</div>
|
||
* <div class="b-remove-text b-alt-text">Unfollow</div>
|
||
* </button>
|
||
* <button type="button" class="button button-add button-icon-only" data-button="add">
|
||
* <div class="b-add-text">Follow</div>
|
||
* <div class="b-added-text b-alt-text">Following</div>
|
||
* <div class="b-remove-text b-alt-text">Unfollow</div>
|
||
* </button>
|
||
*
|
||
* Styleguide 25.3.2
|
||
*/
|
||
/**
|
||
* In the style of an <a> tag
|
||
*
|
||
* Markup: <button class="button button-link">Take a Survey</button>
|
||
*
|
||
* Styleguide 25.3.3
|
||
*/
|
||
/**
|
||
* Button Groups
|
||
*
|
||
* Styleguide 25.4
|
||
*/
|
||
/**
|
||
* With Icons
|
||
*
|
||
* Markup: <div class="button-group">
|
||
* <button type="button" class="button button-icon-only spoticon-list-view-16"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-list-view-16 active"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-grid-view-16"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-grid-view-16 active"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-more-16"></button>
|
||
* <button type="button" class="button button-icon-only spoticon-more-16 active"></button>
|
||
* </div>
|
||
*
|
||
* Styleguide 25.4.1
|
||
*/
|
||
/**
|
||
* With Single letters
|
||
*
|
||
* Markup: <div class="button-group">
|
||
* <button type="button" class="button">A</button>
|
||
* <button type="button" class="button active">A</button>
|
||
* <button type="button" class="button">B</button>
|
||
* <button type="button" class="button active">B</button>
|
||
* <button type="button" class="button">C</button>
|
||
* <button type="button" class="button active">C</button>
|
||
* </div>
|
||
*
|
||
* Styleguide 25.4.2
|
||
*/
|
||
/* stylelint-disable selector-max-type */
|
||
/**
|
||
* Forms
|
||
*
|
||
* Markup: <form role="form">
|
||
* <div class="form-group">
|
||
* <label for="exampleInputEmail1">Email address</label>
|
||
* <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
|
||
* </div>
|
||
* <div class="form-group">
|
||
* <label for="exampleInputPassword1">Password</label>
|
||
* <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||
* </div>
|
||
* <div class="form-group">
|
||
* <label for="exampleInputFile">File input</label>
|
||
* <input type="file" id="exampleInputFile">
|
||
* <p class="help-block">Example block-level help text here.</p>
|
||
* </div>
|
||
* <div class="checkbox">
|
||
* <label>
|
||
* <input type="checkbox"> Check me out
|
||
* </label>
|
||
* </div>
|
||
* <div class="form-group">
|
||
* <textarea style="height: 80px" class="form-control" placeholder="Type your message here..."></textarea>
|
||
* </div>
|
||
* <button type="submit" class="button">Submit</button>
|
||
* </form>
|
||
*
|
||
* Styleguide 25.5
|
||
*/
|
||
/**
|
||
* Inline Form
|
||
*
|
||
* Markup: <form class="form-inline" role="form">
|
||
* <div class="form-group">
|
||
* <label for="exampleInputEmail2">Email address</label>
|
||
* <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
|
||
* </div>
|
||
* <div class="form-group">
|
||
* <label for="exampleInputPassword2">Password</label>
|
||
* <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
|
||
* </div>
|
||
* <div class="checkbox">
|
||
* <label>
|
||
* <input type="checkbox"> Remember me
|
||
* </label>
|
||
* </div>
|
||
* <button type="submit" class="button">Sign in</button>
|
||
* </form>
|
||
*
|
||
* Styleguide 25.5.1
|
||
*/
|
||
/**
|
||
* Horizontal Form
|
||
*
|
||
* Markup: <form class="form-horizontal" role="form">
|
||
* <div class="form-group">
|
||
* <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
|
||
* <div class="col-sm-10">
|
||
* <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
||
* </div>
|
||
* </div>
|
||
* <div class="form-group">
|
||
* <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
|
||
* <div class="col-sm-10">
|
||
* <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
||
* </div>
|
||
* </div>
|
||
* <div class="form-group">
|
||
* <div class="col-sm-offset-2 col-sm-10">
|
||
* <div class="checkbox">
|
||
* <label>
|
||
* <input type="checkbox"> Remember me
|
||
* </label>
|
||
* </div>
|
||
* </div>
|
||
* </div>
|
||
* <div class="form-group">
|
||
* <div class="col-sm-offset-2 col-sm-10">
|
||
* <button type="submit" class="button">Sign in</button>
|
||
* </div>
|
||
* </div>
|
||
* </form>
|
||
*
|
||
* Styleguide 25.5.2
|
||
*/
|
||
/**
|
||
* Checks and Radio Buttons
|
||
*
|
||
* Markup: <div class="checkbox">
|
||
* <label>
|
||
* <input type="checkbox" value="">
|
||
* Option one is this and that—be sure to include why it's great
|
||
* </label>
|
||
* </div>
|
||
* <div class="radio">
|
||
* <label>
|
||
* <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||
* Option one is this and that—be sure to include why it's great
|
||
* </label>
|
||
* </div>
|
||
* <div class="radio">
|
||
* <label>
|
||
* <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||
* Option two can be something else and selecting it will deselect option one
|
||
* </label>
|
||
* </div>
|
||
*
|
||
* Styleguide 25.5.2
|
||
*/
|
||
/**
|
||
* Checks and Radio Buttons Inline
|
||
*
|
||
* Markup: <label class="checkbox-inline">
|
||
* <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
|
||
* </label>
|
||
* <label class="checkbox-inline">
|
||
* <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
|
||
* </label>
|
||
* <label class="checkbox-inline">
|
||
* <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
|
||
* </label>
|
||
*
|
||
*
|
||
* Styleguide 25.5.3
|
||
*/
|
||
/**
|
||
* Selects
|
||
*
|
||
* We don't support selects as they cannot be styled reliably. Please use a
|
||
* button and a dropdown.
|
||
*
|
||
* Styleguide 25.5.4
|
||
*/
|
||
/**
|
||
* States and Sizes
|
||
*
|
||
* Markup: <form role="form">
|
||
* <fieldset disabled>
|
||
* <div class="form-group">
|
||
* <label for="disabledTextInput">Disabled input</label>
|
||
* <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
|
||
* </div>
|
||
* <div class="checkbox">
|
||
* <label>
|
||
* <input type="checkbox"> Can't check this
|
||
* </label>
|
||
* </div>
|
||
* <button type="submit" class="button">Submit</button>
|
||
* </fieldset>
|
||
* <br>
|
||
* <div class="form-group has-success">
|
||
* <label class="control-label" for="inputSuccess">Input with success</label>
|
||
* <input type="text" class="form-control" id="inputSuccess">
|
||
* </div>
|
||
* <div class="form-group has-warning">
|
||
* <label class="control-label" for="inputWarning">Input with warning</label>
|
||
* <input type="text" class="form-control" id="inputWarning">
|
||
* </div>
|
||
* <div class="form-group has-error">
|
||
* <label class="control-label" for="inputError">Input with error</label>
|
||
* <input type="text" class="form-control" id="inputError">
|
||
* </div>
|
||
* </form>
|
||
*
|
||
* Styleguide 25.5.5
|
||
*/
|
||
fieldset {
|
||
padding: 0;
|
||
margin: 0;
|
||
border: 0;
|
||
}
|
||
|
||
legend {
|
||
display: block;
|
||
width: 100%;
|
||
font-size: 21px;
|
||
line-height: inherit;
|
||
color: #b3b3b3;
|
||
}
|
||
|
||
legend {
|
||
padding: 0;
|
||
margin-bottom: 20px;
|
||
border: 0;
|
||
border-bottom: 1px solid #282828;
|
||
}
|
||
|
||
label {
|
||
display: inline-block;
|
||
}
|
||
|
||
label {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
input[type=search] {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
input[type=radio],
|
||
input[type=checkbox] {
|
||
/* IE8-9 */
|
||
line-height: normal;
|
||
}
|
||
|
||
input[type=radio], input[type=checkbox] {
|
||
margin: 2px 0 0;
|
||
margin-top: 1px \9 ;
|
||
}
|
||
|
||
input[type=file] {
|
||
display: block;
|
||
}
|
||
|
||
select[multiple],
|
||
select[size] {
|
||
height: auto;
|
||
}
|
||
|
||
select optgroup {
|
||
font-size: inherit;
|
||
font-style: inherit;
|
||
font-family: inherit;
|
||
}
|
||
|
||
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
|
||
height: auto;
|
||
}
|
||
|
||
output {
|
||
display: block;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
color: #404040;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
output {
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.form-control {
|
||
display: block;
|
||
width: 100%;
|
||
height: 31px;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
color: #404040;
|
||
vertical-align: middle;
|
||
transition: all 0.1s ease-in-out;
|
||
}
|
||
|
||
.form-control {
|
||
padding: 5px 12px 4px;
|
||
background-color: #ffffff;
|
||
background-image: none;
|
||
border: 1px solid #ffffff;
|
||
border-radius: 4px;
|
||
}
|
||
.body-container--windows .form-control, .body-container--unknown-os .form-control {
|
||
border-radius: 0;
|
||
}
|
||
.form-control:focus {
|
||
outline: 0;
|
||
color: #181818;
|
||
}
|
||
.form-control:focus {
|
||
border-color: #ffffff;
|
||
background-color: #ffffff;
|
||
}
|
||
.form-control::placeholder {
|
||
color: #404040;
|
||
}
|
||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
||
cursor: not-allowed;
|
||
background-color: #b3b3b3;
|
||
}
|
||
textarea.form-control {
|
||
height: auto;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.radio,
|
||
.checkbox {
|
||
display: block;
|
||
min-height: 20px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.radio, .checkbox {
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.radio, .checkbox {
|
||
padding-left: 20px;
|
||
}
|
||
|
||
|
||
.radio label,
|
||
.checkbox label {
|
||
display: inline;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
}
|
||
.radio label, .checkbox label {
|
||
margin-bottom: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
|
||
float: left;
|
||
margin-left: -20px;
|
||
}
|
||
|
||
|
||
|
||
.radio + .radio, .checkbox + .checkbox {
|
||
margin-top: -5px;
|
||
}
|
||
|
||
.radio-inline,
|
||
.checkbox-inline {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
font-weight: var(--glue-font-weight-bold);
|
||
}
|
||
|
||
.radio-inline, .checkbox-inline {
|
||
margin-bottom: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.radio-inline, .checkbox-inline {
|
||
padding-left: 20px;
|
||
}
|
||
|
||
|
||
|
||
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
|
||
|
||
input[type=radio][disabled], fieldset[disabled] input[type=radio], input[type=checkbox][disabled], fieldset[disabled] input[type=checkbox], .radio[disabled], fieldset[disabled] .radio, .radio-inline[disabled], fieldset[disabled] .radio-inline, .checkbox[disabled], fieldset[disabled] .checkbox, .checkbox-inline[disabled], fieldset[disabled] .checkbox-inline {
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.has-warning .help-block,
|
||
.has-warning .control-label,
|
||
.has-warning .radio,
|
||
.has-warning .checkbox,
|
||
.has-warning .radio-inline,
|
||
.has-warning .checkbox-inline {
|
||
color: #ffffff;
|
||
}
|
||
.has-warning .form-control {
|
||
border-color: #ffffff;
|
||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||
}
|
||
.has-warning .form-control:focus {
|
||
border-color: #e6e6e6;
|
||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px white;
|
||
}
|
||
|
||
.has-error .help-block,
|
||
.has-error .control-label,
|
||
.has-error .radio,
|
||
.has-error .checkbox,
|
||
.has-error .radio-inline,
|
||
.has-error .checkbox-inline {
|
||
color: #cd1a2b;
|
||
}
|
||
.has-error .form-control {
|
||
border-color: #cd1a2b;
|
||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||
}
|
||
.has-error .form-control:focus {
|
||
border-color: #a01422;
|
||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #eb626f;
|
||
}
|
||
|
||
.has-success .help-block,
|
||
.has-success .control-label,
|
||
.has-success .radio,
|
||
.has-success .checkbox,
|
||
.has-success .radio-inline,
|
||
.has-success .checkbox-inline {
|
||
color: #1ed760;
|
||
}
|
||
.has-success .form-control {
|
||
border-color: #1ed760;
|
||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||
}
|
||
.has-success .form-control:focus {
|
||
border-color: #18aa4c;
|
||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #70eb9c;
|
||
}
|
||
|
||
.form-control-static {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.help-block {
|
||
display: block;
|
||
color: #f3f3f3;
|
||
}
|
||
|
||
.help-block {
|
||
margin-top: 5px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
@media (min-width: 592px) {
|
||
.form-inline .form-group {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.form-inline .form-group {
|
||
margin-bottom: 0;
|
||
}
|
||
.form-inline .form-control {
|
||
display: inline-block;
|
||
}
|
||
.form-inline .radio,
|
||
.form-inline .checkbox {
|
||
display: inline-block;
|
||
}
|
||
.form-inline .radio, .form-inline .checkbox {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
.form-inline .radio, .form-inline .checkbox {
|
||
padding-left: 0;
|
||
}
|
||
|
||
.form-inline .radio input[type=radio], .form-inline .checkbox input[type=checkbox] {
|
||
float: none;
|
||
}
|
||
.form-inline .radio input[type=radio], .form-inline .checkbox input[type=checkbox] {
|
||
margin-left: 0;
|
||
}
|
||
|
||
}
|
||
|
||
.form-horizontal .control-label, .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
padding-top: 6px;
|
||
}
|
||
.form-horizontal .form-group {
|
||
margin-left: -8px;
|
||
margin-right: -8px;
|
||
}
|
||
|
||
.form-horizontal .form-group::after {
|
||
content: "";
|
||
display: table;
|
||
}
|
||
.form-horizontal .form-group::after {
|
||
clear: both;
|
||
}
|
||
.form-horizontal .form-group .row {
|
||
margin-left: -8px;
|
||
margin-right: -8px;
|
||
}
|
||
|
||
@media (min-width: 592px) {
|
||
.form-horizontal .form-group {
|
||
margin-left: -8px;
|
||
margin-right: -8px;
|
||
}
|
||
|
||
.form-horizontal .form-group .row {
|
||
margin-left: -8px;
|
||
margin-right: -8px;
|
||
}
|
||
|
||
}
|
||
@media (min-width: 820px) {
|
||
.form-horizontal .form-group {
|
||
margin-left: -10px;
|
||
margin-right: -10px;
|
||
}
|
||
|
||
.form-horizontal .form-group .row {
|
||
margin-left: -10px;
|
||
margin-right: -10px;
|
||
}
|
||
|
||
}
|
||
@media (min-width: 1280px) {
|
||
.form-horizontal .form-group {
|
||
margin-left: -12px;
|
||
margin-right: -12px;
|
||
}
|
||
|
||
.form-horizontal .form-group .row {
|
||
margin-left: -12px;
|
||
margin-right: -12px;
|
||
}
|
||
|
||
}
|
||
.form-horizontal .form-control-static {
|
||
padding-top: 4px;
|
||
}
|
||
@media (min-width: 592px) {
|
||
.form-horizontal .control-label {
|
||
text-align: right;
|
||
}
|
||
|
||
}
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
/**
|
||
* Dropdown menus
|
||
*
|
||
* Toggleable, contextual menu for displaying lists of links. Arrow can be added if needed.
|
||
* You can also customize the position of the arrow.
|
||
*
|
||
* .arrow-top - Arrow up.
|
||
* .arrow-right - Arrow right.
|
||
* .arrow-bottom - Arrow down.
|
||
* .arrow-left - Arrow left
|
||
* .arrow-top.arrow-position-left - Arrow on top, left positioned.
|
||
* .arrow-right.arrow-position-top - Arrow on the right-hand side, top positioned.
|
||
* .arrow-bottom.arrow-position-right - Arrow on bottom, right positioned.
|
||
* .arrow-left.arrow-position-bottom - Arrow on the left-hand side, bottom positioned.
|
||
*
|
||
* Template: dropdowns
|
||
*
|
||
* Styleguide 50.1
|
||
*/
|
||
/**
|
||
* Dropdown menus with icons
|
||
*
|
||
* Template: dropdowns-with-icons
|
||
*
|
||
* Styleguide 50.1.1
|
||
*/
|
||
.caret {
|
||
display: inline-block;
|
||
width: 0;
|
||
height: 0;
|
||
vertical-align: middle;
|
||
content: "";
|
||
}
|
||
.caret {
|
||
border-top: 4px solid currentcolor;
|
||
}
|
||
.caret {
|
||
margin-left: 2px;
|
||
border-right: 4px solid transparent;
|
||
border-left: 4px solid transparent;
|
||
}
|
||
|
||
|
||
.dropdown-interior-menu {
|
||
list-style: none;
|
||
}
|
||
|
||
.dropdown-interior-menu {
|
||
background-color: #282828;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.dropdown-menu > li > a,
|
||
.dropdown-interior-menu > li > a {
|
||
display: block;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: none;
|
||
color: #b3b3b3;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.dropdown-menu > li > a, .dropdown-interior-menu > li > a {
|
||
padding: 9px 26px;
|
||
clear: both;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.dropdown-menu > li > a::before, .dropdown-interior-menu > li > a::before {
|
||
margin-right: 3px;
|
||
}
|
||
|
||
.dropdown-menu > li > a.checked, .dropdown-interior-menu > li > a.checked {
|
||
padding-left: 6px;
|
||
}
|
||
|
||
.dropdown-menu > li > a.checked::before,
|
||
.dropdown-interior-menu > li > a.checked::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f10a";
|
||
font-size: 16px;
|
||
line-height: inherit;
|
||
}
|
||
.dropdown-menu > li:last-child, .dropdown-menu > li:last-child > a, .dropdown-interior-menu > li:last-child, .dropdown-interior-menu > li:last-child > a {
|
||
border-bottom-right-radius: 8px;
|
||
border-bottom-left-radius: 8px;
|
||
}
|
||
|
||
.dropdown-menu > li:first-child, .dropdown-menu > li:first-child > a, .dropdown-interior-menu > li:first-child, .dropdown-interior-menu > li:first-child > a {
|
||
box-shadow: none;
|
||
}
|
||
.dropdown-menu > li:first-child, .dropdown-menu > li:first-child > a, .dropdown-interior-menu > li:first-child, .dropdown-interior-menu > li:first-child > a {
|
||
border-top-right-radius: 8px;
|
||
border-top-left-radius: 8px;
|
||
}
|
||
|
||
.dropdown-menu.icon-menu > li > a::before, .dropdown-interior-menu.icon-menu > li > a::before {
|
||
margin-left: -8px;
|
||
}
|
||
|
||
.dropdown-menu .divider,
|
||
.dropdown-interior-menu .divider {
|
||
height: 2px;
|
||
overflow: hidden;
|
||
}
|
||
.dropdown-menu .divider, .dropdown-interior-menu .divider {
|
||
margin: 0;
|
||
}
|
||
|
||
.dropdown-menu {
|
||
position: absolute;
|
||
top: 100%;
|
||
z-index: 1000;
|
||
display: none;
|
||
min-width: 160px;
|
||
list-style: none;
|
||
}
|
||
|
||
.dropdown-menu {
|
||
padding: 0;
|
||
margin: 0;
|
||
background-color: #282828;
|
||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.5);
|
||
background-clip: padding-box;
|
||
}
|
||
|
||
.dropdown-menu {
|
||
left: 0;
|
||
float: left;
|
||
}
|
||
|
||
|
||
.dropdown-menu.pull-right {
|
||
right: 0;
|
||
left: auto;
|
||
}
|
||
|
||
.dropdown-menu:not(.no-arrow).arrow-top {
|
||
margin-top: 10px;
|
||
}
|
||
.dropdown-menu:not(.no-arrow).arrow-top::before {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
content: "";
|
||
top: -20px;
|
||
}
|
||
.dropdown-menu:not(.no-arrow).arrow-top::before {
|
||
border: 10px solid transparent;
|
||
border-bottom: 10px solid #282828;
|
||
}
|
||
.dropdown-menu:not(.no-arrow).arrow-top::before {
|
||
left: 50%;
|
||
margin-left: -10px;
|
||
margin-right: -10px;
|
||
}
|
||
|
||
.dropdown-menu:not(.no-arrow).arrow-bottom {
|
||
margin-bottom: 10px;
|
||
}
|
||
.dropdown-menu:not(.no-arrow).arrow-bottom::before {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
content: "";
|
||
bottom: -20px;
|
||
}
|
||
.dropdown-menu:not(.no-arrow).arrow-bottom::before {
|
||
border: 10px solid transparent;
|
||
border-top: 10px solid #282828;
|
||
}
|
||
.dropdown-menu:not(.no-arrow).arrow-bottom::before {
|
||
left: 50%;
|
||
margin-left: -10px;
|
||
margin-right: -10px;
|
||
}
|
||
|
||
.dropdown-menu:not(.no-arrow).arrow-right {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.dropdown-menu:not(.no-arrow).arrow-right::before {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
content: "";
|
||
top: 50%;
|
||
}
|
||
.dropdown-menu:not(.no-arrow).arrow-right::before {
|
||
border: 10px solid transparent;
|
||
margin-top: -10px;
|
||
margin-bottom: -10px;
|
||
}
|
||
.dropdown-menu:not(.no-arrow).arrow-right::before {
|
||
right: -20px;
|
||
border-left: 10px solid #282828;
|
||
}
|
||
|
||
.dropdown-menu:not(.no-arrow).arrow-left {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.dropdown-menu:not(.no-arrow).arrow-left::before {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
content: "";
|
||
top: 50%;
|
||
}
|
||
.dropdown-menu:not(.no-arrow).arrow-left::before {
|
||
border: 10px solid transparent;
|
||
margin-top: -10px;
|
||
margin-bottom: -10px;
|
||
}
|
||
.dropdown-menu:not(.no-arrow).arrow-left::before {
|
||
left: -20px;
|
||
border-right: 10px solid #282828;
|
||
}
|
||
|
||
.dropdown-menu:not(.no-arrow).arrow-position-left::before {
|
||
left: 20px;
|
||
}
|
||
|
||
.dropdown-menu:not(.no-arrow).arrow-position-right::before {
|
||
left: auto;
|
||
right: 20px;
|
||
}
|
||
|
||
.dropdown-menu:not(.no-arrow).arrow-position-top::before {
|
||
top: 20px;
|
||
}
|
||
.dropdown-menu:not(.no-arrow).arrow-position-bottom::before {
|
||
top: auto;
|
||
bottom: 20px;
|
||
}
|
||
|
||
.dropdown-interior-menu > li.selected,
|
||
.dropdown-interior-menu > li > a:focus,
|
||
.dropdown-menu > li.selected,
|
||
.dropdown-menu > li > a:focus,
|
||
.dropdown-submenu:focus > a {
|
||
color: #cdcdcd;
|
||
outline: none;
|
||
}
|
||
|
||
.dropdown-interior-menu > li.selected, .dropdown-interior-menu > li > a:focus, .dropdown-menu > li.selected, .dropdown-menu > li > a:focus, .dropdown-submenu:focus > a {
|
||
background-color: #404040;
|
||
}
|
||
|
||
.dropdown-menu > .active > a,
|
||
.dropdown-menu > .active.selected,
|
||
.dropdown-menu > .active > a:focus,
|
||
.dropdown-interior-menu > .active > a,
|
||
.dropdown-interior-menu > .active.selected,
|
||
.dropdown-interior-menu > .active > a:focus {
|
||
color: #1ed760;
|
||
text-decoration: none;
|
||
outline: 0;
|
||
}
|
||
|
||
.dropdown-menu > .active > a, .dropdown-menu > .active.selected, .dropdown-menu > .active > a:focus, .dropdown-interior-menu > .active > a, .dropdown-interior-menu > .active.selected, .dropdown-interior-menu > .active > a:focus {
|
||
background-color: #404040;
|
||
}
|
||
|
||
.dropdown-menu > .disabled > a,
|
||
.dropdown-menu > .disabled > a:focus,
|
||
.dropdown-interior-menu > .disabled > a,
|
||
.dropdown-interior-menu > .disabled > a:focus {
|
||
color: rgba(179, 179, 179, 0.5);
|
||
}
|
||
.dropdown-menu > .disabled > a:focus,
|
||
.dropdown-interior-menu > .disabled > a:focus {
|
||
text-decoration: none;
|
||
}
|
||
.dropdown-menu > .disabled > a:focus, .dropdown-interior-menu > .disabled > a:focus {
|
||
background-color: transparent;
|
||
background-image: none;
|
||
cursor: default;
|
||
}
|
||
|
||
.open > .dropdown-menu {
|
||
display: block;
|
||
}
|
||
.open > a {
|
||
outline: 0;
|
||
}
|
||
|
||
.dropdown-backdrop {
|
||
position: fixed;
|
||
bottom: 0;
|
||
top: 0;
|
||
z-index: 990;
|
||
}
|
||
|
||
.dropdown-backdrop {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
|
||
|
||
.pull-right > .dropdown-menu {
|
||
right: 0;
|
||
left: auto;
|
||
}
|
||
|
||
|
||
|
||
.dropup .caret,
|
||
.navbar-fixed-bottom .dropdown .caret {
|
||
content: "";
|
||
}
|
||
|
||
.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
|
||
border-top: 0;
|
||
border-bottom: 4px solid currentcolor;
|
||
}
|
||
.dropup .dropdown-menu,
|
||
.navbar-fixed-bottom .dropdown .dropdown-menu {
|
||
top: auto;
|
||
bottom: 100%;
|
||
}
|
||
.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
|
||
margin-bottom: 1px;
|
||
}
|
||
|
||
.dropdown-submenu {
|
||
position: relative;
|
||
}
|
||
|
||
.dropdown-submenu > .dropdown-menu {
|
||
top: 0;
|
||
display: none;
|
||
}
|
||
|
||
.dropdown-submenu > .dropdown-menu {
|
||
margin-top: -1px;
|
||
}
|
||
|
||
.dropdown-submenu > .dropdown-menu {
|
||
left: calc(100% - 1px);
|
||
}
|
||
|
||
|
||
.dropdown-submenu > .dropdown-menu.open {
|
||
display: inline;
|
||
}
|
||
|
||
.dropdown-submenu.left > .dropdown-menu {
|
||
left: auto;
|
||
right: calc(100% - 1px);
|
||
}
|
||
|
||
|
||
|
||
.dropup .dropdown-submenu > .dropdown-menu {
|
||
top: auto;
|
||
bottom: 0;
|
||
}
|
||
|
||
.dropup .dropdown-submenu > .dropdown-menu {
|
||
margin-top: 0;
|
||
margin-bottom: -2px;
|
||
}
|
||
|
||
.dropup .dropdown-submenu > .dropdown-menu {
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
|
||
|
||
|
||
.dropdown-submenu > a::after {
|
||
display: block;
|
||
content: " ";
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.dropdown-submenu > a::after {
|
||
border-color: transparent;
|
||
border-style: solid;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.dropdown-submenu > a::after {
|
||
float: right;
|
||
border-width: 5px 0 5px 5px;
|
||
border-left-color: #b3b3b3;
|
||
margin-right: -7px;
|
||
}
|
||
|
||
|
||
|
||
.dropdown-submenu:hover > a::after {
|
||
border-left-color: #cdcdcd;
|
||
}
|
||
|
||
|
||
|
||
.dropdown-submenu.pull-left {
|
||
float: none;
|
||
}
|
||
.dropdown-submenu.pull-left > .dropdown-menu {
|
||
left: -100%;
|
||
margin-left: 10px;
|
||
border-top-right-radius: 0;
|
||
}
|
||
|
||
|
||
.typeahead {
|
||
z-index: 1051;
|
||
}
|
||
|
||
.body-container--windows .dropdown-menu, .body-container--unknown-os .dropdown-menu {
|
||
border-radius: 0;
|
||
}
|
||
.body-container--windows .dropdown-menu > li:last-child, .body-container--windows .dropdown-menu > li:last-child > a, .body-container--windows .dropdown-interior-menu > li:last-child, .body-container--windows .dropdown-interior-menu > li:last-child > a, .body-container--unknown-os .dropdown-menu > li:last-child, .body-container--unknown-os .dropdown-menu > li:last-child > a, .body-container--unknown-os .dropdown-interior-menu > li:last-child, .body-container--unknown-os .dropdown-interior-menu > li:last-child > a {
|
||
border-bottom-right-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
|
||
.body-container--windows .dropdown-menu > li:first-child, .body-container--windows .dropdown-menu > li:first-child > a, .body-container--windows .dropdown-interior-menu > li:first-child, .body-container--windows .dropdown-interior-menu > li:first-child > a, .body-container--unknown-os .dropdown-menu > li:first-child, .body-container--unknown-os .dropdown-menu > li:first-child > a, .body-container--unknown-os .dropdown-interior-menu > li:first-child, .body-container--unknown-os .dropdown-interior-menu > li:first-child > a {
|
||
border-top-right-radius: 0;
|
||
border-top-left-radius: 0;
|
||
}
|
||
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
/**
|
||
* Dividers
|
||
*
|
||
* Small divider with or without title. In use on album page between regular tracks and additional tracks.
|
||
*
|
||
* Styleguide 30.1
|
||
*/
|
||
/**
|
||
* Horizontal rules
|
||
*
|
||
* Markup: <hr>
|
||
*
|
||
* Styleguide 30.1.1
|
||
*/
|
||
hr {
|
||
margin: 5px 0;
|
||
border: 0;
|
||
border-top: 1px solid #282828;
|
||
}
|
||
|
||
/**
|
||
* Section divider
|
||
*
|
||
* Markup:
|
||
* <div class="section-divider">
|
||
* <div>Some cool section</div>
|
||
* <a class="section-auxiliary">Some Action</a>
|
||
* </div>
|
||
* <div class="section-divider section-divider-borderless">
|
||
* <div>Some cool section</div>
|
||
* </div>
|
||
* <div class="section-divider">
|
||
* <h2>Normailizes header sizes</h2>
|
||
* <div class="section-auxiliary">
|
||
* <div class="button-group">
|
||
* <a class="button button-icon-with-stroke spoticon-list-view-16" href="#" data-view-mode="lists"></a>
|
||
* <a class="button button-icon-with-stroke spoticon-grid-view-16" href="#" data-view-mode="covers"></a>
|
||
* </div>
|
||
* </div>
|
||
* </div>
|
||
* <div class="section-divider">
|
||
* <a>Works with links</a>
|
||
* <a class="section-auxiliary">Some Action</a>
|
||
* </div>
|
||
*
|
||
* Styleguide 30.1.3
|
||
*/
|
||
.section-divider {
|
||
position: relative;
|
||
color: #ffffff;
|
||
}
|
||
.section-divider {
|
||
border-bottom: 1px solid #282828;
|
||
margin: 0 0 16px;
|
||
padding: 26px 0 4px;
|
||
}
|
||
.section-divider::after {
|
||
content: "";
|
||
display: table;
|
||
}
|
||
.section-divider::after {
|
||
clear: both;
|
||
}
|
||
.section-divider > * {
|
||
font-size: 18px;
|
||
line-height: 24px;
|
||
letter-spacing: -0.005em;
|
||
font-weight: var(--glue-font-weight-black);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
}
|
||
.section-divider > * {
|
||
margin: 0;
|
||
}
|
||
|
||
.section-divider > *:first-child {
|
||
float: left;
|
||
}
|
||
|
||
.section-divider.section-divider-borderless {
|
||
border-bottom: 0;
|
||
margin-bottom: 8px;
|
||
padding-bottom: 0;
|
||
}
|
||
.section-divider .section-auxiliary {
|
||
white-space: nowrap;
|
||
}
|
||
.section-divider .section-auxiliary {
|
||
float: right;
|
||
}
|
||
|
||
.section-divider .section-auxiliary a {
|
||
color: #b3b3b3;
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
}
|
||
|
||
|
||
.section-divider .section-auxiliary a:hover {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.section-divider-small {
|
||
border-bottom: 0;
|
||
margin-bottom: 8px;
|
||
padding-bottom: 0;
|
||
}
|
||
.section-divider-small > * {
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-bold);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
}
|
||
.section-divider-small > * {
|
||
margin: 0;
|
||
}
|
||
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
/**
|
||
* Tables
|
||
*
|
||
* For basic styling—light padding and only horizontal dividers—add the base class
|
||
* <code>.table</code> to any <code><table></code>. It may seem super redundant,
|
||
* but given the widespread use of tables for other plugins like calendars and date
|
||
* pickers, we've opted to isolate our custom table styles.
|
||
*
|
||
* Template: tables
|
||
*
|
||
* Styleguide 30.6
|
||
*/
|
||
table {
|
||
max-width: 100%;
|
||
}
|
||
|
||
th {
|
||
font-weight: var(--glue-font-weight-bold);
|
||
}
|
||
|
||
th {
|
||
text-align: left;
|
||
}
|
||
|
||
|
||
|
||
.table {
|
||
width: 100%;
|
||
}
|
||
.table th,
|
||
.table td {
|
||
position: relative;
|
||
line-height: 20px;
|
||
vertical-align: top;
|
||
}
|
||
.table th, .table td {
|
||
padding: 8px;
|
||
border-top: 1px solid #282828;
|
||
}
|
||
.table tbody > tr:last-child > td {
|
||
border-bottom: 1px solid #282828;
|
||
}
|
||
.table thead th {
|
||
border-top: 0;
|
||
}
|
||
.table thead th {
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
/* stylelint-disable max-nesting-depth */
|
||
/**
|
||
* List Groups
|
||
*
|
||
* Toggleable, contextual menu for displaying lists of links. Arrow can be added if needed.
|
||
*
|
||
* Styleguide 30.3
|
||
*/
|
||
/**
|
||
* Linked Items
|
||
*
|
||
* Template: list-groups-linked
|
||
*
|
||
* Styleguide 30.3.2
|
||
*/
|
||
/**
|
||
* Custom Content
|
||
*
|
||
* Add nearly any HTML within, even for linked list groups like the one below.
|
||
*
|
||
* Template: list-groups-custom
|
||
*
|
||
* Styleguide 30.3.3
|
||
*/
|
||
.list-group {
|
||
list-style: none;
|
||
}
|
||
.list-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
.list-group {
|
||
padding-left: 0;
|
||
}
|
||
|
||
|
||
.list-group-item {
|
||
position: relative;
|
||
display: block;
|
||
}
|
||
|
||
.list-group-item {
|
||
padding: 10px;
|
||
border-bottom: 1px solid #282828;
|
||
border-top: 1px solid #282828;
|
||
margin-top: -1px;
|
||
}
|
||
|
||
.list-group-item-heading,
|
||
.list-group-item-text {
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.list-group-item-heading {
|
||
margin-top: 0;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.list-group-item-text {
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.list-group-item-text {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
a.list-group-item {
|
||
outline: 0;
|
||
}
|
||
|
||
a.list-group-item {
|
||
cursor: default;
|
||
}
|
||
a.list-group-item .list-group-item-heading {
|
||
color: #ffffff;
|
||
}
|
||
a.list-group-item .list-group-item-text {
|
||
color: #b3b3b3;
|
||
}
|
||
|
||
a.list-group-item:hover,
|
||
a.list-group-item:focus {
|
||
text-decoration: none;
|
||
}
|
||
|
||
a.list-group-item:hover, a.list-group-item:focus {
|
||
background-color: inherit;
|
||
}
|
||
|
||
a.list-group-item.active {
|
||
z-index: 2;
|
||
color: #ffffff;
|
||
}
|
||
|
||
a.list-group-item.active {
|
||
background-color: #1db954;
|
||
border-color: #1db954;
|
||
}
|
||
a.list-group-item.active .list-group-item-heading {
|
||
color: inherit;
|
||
}
|
||
a.list-group-item.active .list-group-item-text {
|
||
color: inherit;
|
||
}
|
||
|
||
/**
|
||
* Media List Items
|
||
*
|
||
* This is the structure for list items (like in playlists, messages, and search popup.)
|
||
*
|
||
* Modifiers:
|
||
*
|
||
* - `.active` - gives a green active indicator.
|
||
* - `.large` - gives more padding and more options.
|
||
* - `.playable` - **only for `.large` items** - gives a play button on hover for the element.
|
||
* - `.playing` - **only for `.large.playable` items** -- Shows the pause button.
|
||
*
|
||
* Auto-Modifiers:
|
||
*
|
||
* Some modifiers get added by the template based on the data that gets passed in.
|
||
*
|
||
* - `.multiline` - adjusts cell for two lines - added upon `subtitle` detection.
|
||
*
|
||
* Note: you can of course replicate this without using our templates, but why!
|
||
*
|
||
* Social-proof:
|
||
*
|
||
* Social proof is rendered if the data is provided. See https://ghe.spotify.net/social/socialproof-service on how to decorate your
|
||
* items with social proof data. An example item would be:
|
||
* ```Json
|
||
* { "uri": "spotify:artist:00sAr10UTV1JZtHqxsLVn4",
|
||
* "name": "Black Mountain",
|
||
* "imageUrl": "https://d3rt1990lpmkn.cloudfront.net/unbranded/10b1e3bfd5f4a527032f34951260ade4c4004c1f",
|
||
* "socialproof": {
|
||
* "totalListeners": "10",
|
||
* "listeners": [
|
||
* { "name": "Karl" },
|
||
* { "name": "Ada" }
|
||
* ]
|
||
* }
|
||
* }
|
||
* ```
|
||
*
|
||
* Template: list-group-item-media
|
||
* CodeDisplay: $list-group-item-media
|
||
* Data: list-group-demos
|
||
*
|
||
* Styleguide 30.3.4
|
||
*/
|
||
.list-group-item.list-group-item-media {
|
||
height: 52px;
|
||
line-height: 50px;
|
||
transition: background 0.1s ease;
|
||
}
|
||
.list-group-item.list-group-item-media {
|
||
border: 0;
|
||
border-bottom: 2px solid transparent;
|
||
cursor: pointer;
|
||
margin-top: 0;
|
||
padding: 0;
|
||
background-color: transparent;
|
||
background-clip: padding-box;
|
||
}
|
||
.list-group-item.list-group-item-media:last-child {
|
||
height: 50px;
|
||
}
|
||
.list-group-item.list-group-item-media:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.list-group-item.list-group-item-media > a {
|
||
outline: none;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.list-group-item.list-group-item-media > a {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.list-group-item.list-group-item-media > a:hover, .list-group-item.list-group-item-media > a:active, .list-group-item.list-group-item-media > a:focus {
|
||
border-bottom: 1px solid transparent;
|
||
}
|
||
.list-group-item.list-group-item-media .card {
|
||
bottom: 0;
|
||
position: absolute;
|
||
top: 0;
|
||
transition: background 0.2s ease;
|
||
width: 50px;
|
||
}
|
||
.list-group-item.list-group-item-media .card {
|
||
padding-bottom: 0;
|
||
}
|
||
.list-group-item.list-group-item-media .card {
|
||
left: 0;
|
||
}
|
||
|
||
.list-group-item.list-group-item-media .card-type-artist, .list-group-item.list-group-item-media .card-type-user {
|
||
padding: 5px;
|
||
}
|
||
.list-group-item.list-group-item-media.active {
|
||
background-color: #333333;
|
||
border-color: transparent;
|
||
}
|
||
.list-group-item.list-group-item-media.active::before {
|
||
content: "";
|
||
height: 100%;
|
||
position: absolute;
|
||
width: 2px;
|
||
z-index: 100;
|
||
}
|
||
.list-group-item.list-group-item-media.active::before {
|
||
background: #1db954;
|
||
}
|
||
.list-group-item.list-group-item-media.active::before {
|
||
right: 0;
|
||
}
|
||
|
||
.list-group-item.list-group-item-media.unread::before {
|
||
content: "";
|
||
height: 100%;
|
||
position: absolute;
|
||
width: 2px;
|
||
z-index: 100;
|
||
}
|
||
.list-group-item.list-group-item-media.unread::before {
|
||
background: #2e77d0;
|
||
}
|
||
.list-group-item.list-group-item-media.unread::before {
|
||
right: 0;
|
||
}
|
||
|
||
.list-group-item.list-group-item-media:hover, .list-group-item.list-group-item-media:active {
|
||
background-color: #282828;
|
||
}
|
||
.list-group-item.list-group-item-media.multiline .item-data {
|
||
line-height: 1.5;
|
||
}
|
||
.list-group-item.list-group-item-media.multiline .item-data {
|
||
padding-top: 5px;
|
||
}
|
||
.list-group-item.list-group-item-media.multiline .item-data > span {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.list-group-item.list-group-item-media .item-data {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.list-group-item.list-group-item-media .item-data {
|
||
padding: 0 10px 0 60px;
|
||
}
|
||
|
||
.list-group-item.list-group-item-media.more {
|
||
height: 38px;
|
||
line-height: 36px;
|
||
}
|
||
.list-group-item.list-group-item-media.more {
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.list-group-item.list-group-item-media.more::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f110";
|
||
font-size: 16px;
|
||
line-height: inherit;
|
||
}
|
||
.list-group-item.list-group-item-media.more::before {
|
||
position: absolute;
|
||
}
|
||
.list-group-item.list-group-item-media.more::before {
|
||
right: 5px;
|
||
}
|
||
|
||
.list-group-item.list-group-item-media.more:hover {
|
||
border-bottom-color: transparent;
|
||
}
|
||
.list-group-item.list-group-item-media .button {
|
||
height: 44px;
|
||
width: 44px;
|
||
}
|
||
.list-group-item.list-group-item-media.large {
|
||
height: 72px;
|
||
}
|
||
.list-group-item.list-group-item-media.large .card {
|
||
top: 10px;
|
||
bottom: 10px;
|
||
}
|
||
.list-group-item.list-group-item-media.large .card {
|
||
left: 10px;
|
||
}
|
||
|
||
.list-group-item.list-group-item-media.large .card-type-artist, .list-group-item.list-group-item-media.large .card-type-user {
|
||
padding: 0;
|
||
}
|
||
.list-group-item.list-group-item-media.large .item-data {
|
||
line-height: 70px;
|
||
}
|
||
.list-group-item.list-group-item-media.large .item-data {
|
||
padding-left: 70px;
|
||
}
|
||
|
||
.list-group-item.list-group-item-media.large.multiline .item-data {
|
||
line-height: 24px;
|
||
}
|
||
.list-group-item.list-group-item-media.large.multiline .item-data {
|
||
padding-top: 12px;
|
||
}
|
||
.list-group-item.list-group-item-media .list-group-item-media-play {
|
||
position: absolute;
|
||
top: 12px;
|
||
visibility: hidden;
|
||
}
|
||
.list-group-item.list-group-item-media .list-group-item-media-play {
|
||
left: 12px;
|
||
}
|
||
|
||
.list-group-item.list-group-item-media.playable.large:hover .list-group-item-media-play {
|
||
visibility: visible;
|
||
}
|
||
.list-group-item.list-group-item-media.playable.large:hover .card {
|
||
visibility: hidden;
|
||
}
|
||
.list-group-item.list-group-item-media.playable.large.playing .list-group-item-media-play {
|
||
visibility: visible;
|
||
}
|
||
.list-group-item.list-group-item-media.playable.large.playing .list-group-item-media-play {
|
||
border-color: #ffffff;
|
||
}
|
||
.list-group-item.list-group-item-media.playable.large.playing .list-group-item-media-play::before {
|
||
content: "\f131";
|
||
}
|
||
.list-group-item.list-group-item-media.playable.large.playing .card {
|
||
visibility: hidden;
|
||
}
|
||
|
||
/**
|
||
* Social Media List Items
|
||
*
|
||
* These are used in follow, profile and artist apps.
|
||
*
|
||
* Template: list-group-item-social
|
||
* Data: social-list-item
|
||
*
|
||
* Styleguide 30.3.6
|
||
*/
|
||
.list-group-item.list-group-item-social {
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.list-group-item.list-group-item-social table {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
table-layout: fixed;
|
||
}
|
||
.list-group-item.list-group-item-social td:first-child {
|
||
width: 100px;
|
||
min-width: 100px;
|
||
}
|
||
.list-group-item.list-group-item-social td:nth-child(2) {
|
||
width: 100%;
|
||
}
|
||
.list-group-item.list-group-item-social td:nth-child(2) > div {
|
||
position: relative;
|
||
height: 100%;
|
||
}
|
||
.list-group-item.list-group-item-social td:nth-child(2) > div > div {
|
||
position: absolute;
|
||
top: -35px;
|
||
}
|
||
.list-group-item.list-group-item-social td:nth-child(2) > div > div {
|
||
left: 10px;
|
||
right: 0;
|
||
}
|
||
|
||
.list-group-item.list-group-item-social td:nth-child(2) > div > div > span {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.list-group-item.list-group-item-social .list-group-item-text-wrapper {
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
display: flex;
|
||
}
|
||
|
||
|
||
.list-group-item.list-group-item-social .list-group-item-text {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.list-group-item.list-group-item-social td:nth-child(3) {
|
||
width: 0;
|
||
}
|
||
.list-group-item.list-group-item-social .remove {
|
||
display: none;
|
||
position: absolute;
|
||
top: 10px;
|
||
}
|
||
.list-group-item.list-group-item-social .remove {
|
||
right: 0;
|
||
}
|
||
|
||
.list-group-item.list-group-item-social:hover .remove {
|
||
display: inline;
|
||
}
|
||
.list-group-item.list-group-item-social .pull-bottom {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
/**
|
||
* Carousel
|
||
*
|
||
* For sideways paging content. The paging is done by changing the `left`
|
||
* attribute of the `.carousel-inner` element.
|
||
*
|
||
* Template: carousel
|
||
*
|
||
* Styleguide 30.2
|
||
*/
|
||
.carousel {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.crsl-inner {
|
||
white-space: nowrap;
|
||
word-spacing: 0;
|
||
position: relative;
|
||
will-change: left;
|
||
}
|
||
|
||
.crsl-inner {
|
||
left: 0%;
|
||
transition: left 0.5s ease-in-out;
|
||
}
|
||
|
||
|
||
.crsl-inner.crsl-inner-drag {
|
||
transition: 0s;
|
||
}
|
||
.crsl-inner.crsl-inner-swipe {
|
||
transition: left 0.3s ease-out;
|
||
}
|
||
|
||
|
||
.crsl-inner .crsl-item {
|
||
white-space: normal;
|
||
}
|
||
.crsl-inner .crsl-item.col-xs-1, .crsl-inner .crsl-item.col-xs-2, .crsl-inner .crsl-item.col-xs-3, .crsl-inner .crsl-item.col-xs-4, .crsl-inner .crsl-item.col-xs-5, .crsl-inner .crsl-item.col-xs-6, .crsl-inner .crsl-item.col-xs-7, .crsl-inner .crsl-item.col-xs-8, .crsl-inner .crsl-item.col-xs-9, .crsl-inner .crsl-item.col-xs-10, .crsl-inner .crsl-item.col-xs-11, .crsl-inner .crsl-item.col-xs-12, .crsl-inner .crsl-item.col-sm-1, .crsl-inner .crsl-item.col-sm-2, .crsl-inner .crsl-item.col-sm-3, .crsl-inner .crsl-item.col-sm-4, .crsl-inner .crsl-item.col-sm-5, .crsl-inner .crsl-item.col-sm-6, .crsl-inner .crsl-item.col-sm-7, .crsl-inner .crsl-item.col-sm-8, .crsl-inner .crsl-item.col-sm-9, .crsl-inner .crsl-item.col-sm-10, .crsl-inner .crsl-item.col-sm-11, .crsl-inner .crsl-item.col-sm-12, .crsl-inner .crsl-item.col-md-1, .crsl-inner .crsl-item.col-md-2, .crsl-inner .crsl-item.col-md-3, .crsl-inner .crsl-item.col-md-4, .crsl-inner .crsl-item.col-md-5, .crsl-inner .crsl-item.col-md-6, .crsl-inner .crsl-item.col-md-7, .crsl-inner .crsl-item.col-md-8, .crsl-inner .crsl-item.col-md-9, .crsl-inner .crsl-item.col-md-10, .crsl-inner .crsl-item.col-md-11, .crsl-inner .crsl-item.col-md-12, .crsl-inner .crsl-item.col-lg-1, .crsl-inner .crsl-item.col-lg-2, .crsl-inner .crsl-item.col-lg-3, .crsl-inner .crsl-item.col-lg-4, .crsl-inner .crsl-item.col-lg-5, .crsl-inner .crsl-item.col-lg-6, .crsl-inner .crsl-item.col-lg-7, .crsl-inner .crsl-item.col-lg-8, .crsl-inner .crsl-item.col-lg-9, .crsl-inner .crsl-item.col-lg-10, .crsl-inner .crsl-item.col-lg-11, .crsl-inner .crsl-item.col-lg-12 {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
.crsl-inner .crsl-item.col-xs-1, .crsl-inner .crsl-item.col-xs-2, .crsl-inner .crsl-item.col-xs-3, .crsl-inner .crsl-item.col-xs-4, .crsl-inner .crsl-item.col-xs-5, .crsl-inner .crsl-item.col-xs-6, .crsl-inner .crsl-item.col-xs-7, .crsl-inner .crsl-item.col-xs-8, .crsl-inner .crsl-item.col-xs-9, .crsl-inner .crsl-item.col-xs-10, .crsl-inner .crsl-item.col-xs-11, .crsl-inner .crsl-item.col-xs-12, .crsl-inner .crsl-item.col-sm-1, .crsl-inner .crsl-item.col-sm-2, .crsl-inner .crsl-item.col-sm-3, .crsl-inner .crsl-item.col-sm-4, .crsl-inner .crsl-item.col-sm-5, .crsl-inner .crsl-item.col-sm-6, .crsl-inner .crsl-item.col-sm-7, .crsl-inner .crsl-item.col-sm-8, .crsl-inner .crsl-item.col-sm-9, .crsl-inner .crsl-item.col-sm-10, .crsl-inner .crsl-item.col-sm-11, .crsl-inner .crsl-item.col-sm-12, .crsl-inner .crsl-item.col-md-1, .crsl-inner .crsl-item.col-md-2, .crsl-inner .crsl-item.col-md-3, .crsl-inner .crsl-item.col-md-4, .crsl-inner .crsl-item.col-md-5, .crsl-inner .crsl-item.col-md-6, .crsl-inner .crsl-item.col-md-7, .crsl-inner .crsl-item.col-md-8, .crsl-inner .crsl-item.col-md-9, .crsl-inner .crsl-item.col-md-10, .crsl-inner .crsl-item.col-md-11, .crsl-inner .crsl-item.col-md-12, .crsl-inner .crsl-item.col-lg-1, .crsl-inner .crsl-item.col-lg-2, .crsl-inner .crsl-item.col-lg-3, .crsl-inner .crsl-item.col-lg-4, .crsl-inner .crsl-item.col-lg-5, .crsl-inner .crsl-item.col-lg-6, .crsl-inner .crsl-item.col-lg-7, .crsl-inner .crsl-item.col-lg-8, .crsl-inner .crsl-item.col-lg-9, .crsl-inner .crsl-item.col-lg-10, .crsl-inner .crsl-item.col-lg-11, .crsl-inner .crsl-item.col-lg-12 {
|
||
float: none;
|
||
}
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
/**
|
||
* Simple Navs
|
||
*
|
||
* .nav-justified - Justified nav.
|
||
* .nav-pills - Pill style.
|
||
* .nav-pills.nav-justified - Pill style justified.
|
||
*
|
||
* Template: navs
|
||
*
|
||
* Styleguide 40.2
|
||
*/
|
||
.nav {
|
||
list-style: none;
|
||
}
|
||
.nav {
|
||
margin-bottom: 0;
|
||
border-bottom: 1px solid #282828;
|
||
}
|
||
.nav {
|
||
margin-left: 0;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.nav.nav-justified {
|
||
width: 100%;
|
||
}
|
||
.nav.nav-justified > li {
|
||
display: table-cell;
|
||
width: 1%;
|
||
}
|
||
.nav.nav-justified > li {
|
||
float: none;
|
||
}
|
||
.nav.nav-justified > li > a {
|
||
text-align: center;
|
||
}
|
||
.nav::after {
|
||
content: "";
|
||
display: table;
|
||
}
|
||
.nav::after {
|
||
clear: both;
|
||
}
|
||
.nav > li {
|
||
position: relative;
|
||
display: block;
|
||
}
|
||
.nav > li {
|
||
margin: 0 15px;
|
||
}
|
||
.nav > li {
|
||
float: left;
|
||
}
|
||
|
||
.nav > li:first-child, .nav > li:first-child .navbar-text {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.nav > li:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.nav > li > a {
|
||
position: relative;
|
||
display: block;
|
||
line-height: 44px;
|
||
color: #b3b3b3;
|
||
overflow: hidden;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 14px;
|
||
transition: color 0.2s;
|
||
}
|
||
.nav > li > a {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.nav > li > a:hover, .nav > li > a:focus {
|
||
color: #ffffff;
|
||
}
|
||
.nav > li > a:hover, .nav > li > a:focus {
|
||
border-bottom: none;
|
||
}
|
||
.nav > li > a::after {
|
||
content: " ";
|
||
bottom: 4px;
|
||
height: 2px;
|
||
position: absolute;
|
||
width: 30px;
|
||
transition: background-color 0.5s;
|
||
}
|
||
.nav > li > a::after {
|
||
background-color: transparent;
|
||
}
|
||
.nav > li > a::after {
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.nav > li > p {
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.nav > li.active > a {
|
||
color: #ffffff;
|
||
}
|
||
.nav > li.active > a::after {
|
||
background-color: #1db954;
|
||
}
|
||
.nav > li.disabled > a {
|
||
color: #b3b3b3;
|
||
}
|
||
.nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
|
||
color: #b3b3b3;
|
||
text-decoration: none;
|
||
}
|
||
.nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
|
||
background-color: transparent;
|
||
cursor: default;
|
||
}
|
||
.nav.open > a, .nav.open > a:hover, .nav.open > a:focus {
|
||
color: #fff;
|
||
}
|
||
.nav.open > a, .nav.open > a:hover, .nav.open > a:focus {
|
||
background-color: #ffffff;
|
||
border-color: #ffffff;
|
||
}
|
||
.nav.open > a .caret, .nav.open > a:hover .caret, .nav.open > a:focus .caret {
|
||
border-top-color: #fff;
|
||
border-bottom-color: #fff;
|
||
}
|
||
.nav > .pull-right {
|
||
float: right;
|
||
}
|
||
|
||
.nav .nav-divider {
|
||
height: 2px;
|
||
overflow: hidden;
|
||
}
|
||
.nav .nav-divider {
|
||
margin: 9px 0;
|
||
background-color: #e5e5e5;
|
||
border-bottom: 1px solid #ffffff;
|
||
}
|
||
|
||
.nav-justified {
|
||
width: 100%;
|
||
}
|
||
.nav-justified > li {
|
||
display: table-cell;
|
||
width: 1%;
|
||
}
|
||
.nav-justified > li {
|
||
float: none;
|
||
}
|
||
.nav-justified > li > a {
|
||
text-align: center;
|
||
}
|
||
|
||
.tabbable::after {
|
||
content: "";
|
||
display: table;
|
||
}
|
||
|
||
.tabbable::after {
|
||
clear: both;
|
||
}
|
||
|
||
.tab-content > .tab-pane,
|
||
.pill-content > .pill-pane {
|
||
display: none;
|
||
}
|
||
|
||
.tab-content > .active,
|
||
.pill-content > .active {
|
||
display: block;
|
||
}
|
||
|
||
.nav .caret {
|
||
border-top-color: #b3b3b3;
|
||
border-bottom-color: #b3b3b3;
|
||
}
|
||
|
||
.nav .active .caret {
|
||
border-top-color: #ffffff;
|
||
border-bottom-color: #ffffff;
|
||
}
|
||
|
||
.nav a:hover .caret {
|
||
border-top-color: #ffffff;
|
||
border-bottom-color: #ffffff;
|
||
}
|
||
|
||
.nav-tabs .dropdown-menu {
|
||
margin-top: -1px;
|
||
}
|
||
|
||
.nav-tabs .dropdown-menu {
|
||
border-top-right-radius: 0;
|
||
border-top-left-radius: 0;
|
||
}
|
||
|
||
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
/* stylelint-disable max-nesting-depth */
|
||
/**
|
||
* Navbars
|
||
*
|
||
* These are cool navbars.
|
||
* NOTE: Navbars are meant to be the full width of the page (otherwise they are just navs).
|
||
* So if your window is small these demos will look broken.
|
||
*
|
||
* Template: navbar
|
||
*
|
||
* Styleguide 40.3
|
||
*/
|
||
.navbar {
|
||
position: relative;
|
||
z-index: 1000;
|
||
min-height: 44px;
|
||
}
|
||
.navbar::after {
|
||
content: "";
|
||
display: table;
|
||
}
|
||
.navbar::after {
|
||
clear: both;
|
||
}
|
||
.navbar.sticky-top {
|
||
z-index: 1020;
|
||
}
|
||
.navbar.sticky-top {
|
||
background: #121212;
|
||
border-bottom: 1px solid #282828;
|
||
}
|
||
|
||
.navbar-fixed-wrapper {
|
||
height: 44px;
|
||
}
|
||
|
||
.navbar-nav {
|
||
border-bottom: 0;
|
||
margin: 0;
|
||
}
|
||
.navbar-nav > li > a {
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-bold);
|
||
color: #b3b3b3;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
}
|
||
|
||
|
||
.navbar-nav:not(.no-overflow-menu) {
|
||
visibility: hidden;
|
||
}
|
||
.navbar-nav:not(.no-overflow-menu) li.last-visible {
|
||
margin-right: 0;
|
||
}
|
||
|
||
@media (max-width: 591px) {
|
||
.navbar-nav .open .dropdown-menu {
|
||
position: static;
|
||
width: auto;
|
||
}
|
||
.navbar-nav .open .dropdown-menu {
|
||
float: none;
|
||
margin-top: 0;
|
||
background-color: transparent;
|
||
border: 0;
|
||
box-shadow: none;
|
||
}
|
||
.navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
|
||
padding: 5px 15px 5px 25px;
|
||
}
|
||
|
||
.navbar-nav .open .dropdown-menu > li > a {
|
||
line-height: 20px;
|
||
}
|
||
.navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus {
|
||
background-image: none;
|
||
}
|
||
}
|
||
.navbar-nav > li {
|
||
float: left;
|
||
}
|
||
|
||
.navbar-nav > li.navbar-right {
|
||
float: right;
|
||
}
|
||
|
||
.navbar-nav > li > a {
|
||
line-height: 44px;
|
||
}
|
||
|
||
.navbar.large {
|
||
min-height: 60px;
|
||
}
|
||
.navbar.large .navbar-nav > li > a {
|
||
line-height: 60px;
|
||
}
|
||
|
||
.navbar-left {
|
||
float: left;
|
||
}
|
||
|
||
|
||
|
||
.navbar-right {
|
||
float: right;
|
||
}
|
||
|
||
|
||
|
||
.navbar-nav > li > .dropdown-menu {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.navbar-nav > li > .dropdown-menu {
|
||
border-top-right-radius: 0;
|
||
border-top-left-radius: 0;
|
||
}
|
||
|
||
|
||
|
||
.navbar.sticky-bottom .navbar-nav > li > .dropdown-menu, .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
|
||
border-bottom-right-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
|
||
|
||
|
||
.navbar-nav.pull-right > li > .dropdown-menu, .navbar-nav > li > .dropdown-menu.pull-right {
|
||
left: auto;
|
||
right: 0;
|
||
}
|
||
|
||
|
||
|
||
.navbar-btn {
|
||
margin-top: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.navbar-text {
|
||
margin: 12px 10px;
|
||
}
|
||
|
||
.navbar-text {
|
||
float: left;
|
||
}
|
||
|
||
|
||
|
||
@media (max-width: 819px) {
|
||
.navbar-right {
|
||
display: none;
|
||
}
|
||
}
|
||
/**
|
||
* Tooltips
|
||
*
|
||
* These are used to display informational text.
|
||
*
|
||
* Template: tooltip
|
||
*
|
||
* Styleguide 50.3
|
||
*/
|
||
.tooltip, #tooltip {
|
||
position: absolute;
|
||
z-index: 1030;
|
||
display: block;
|
||
visibility: visible;
|
||
color: #b3b3b3;
|
||
text-decoration: none;
|
||
pointer-events: none;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: none;
|
||
}
|
||
.tooltip, #tooltip {
|
||
padding: 3px 8px;
|
||
background-color: #282828;
|
||
border-radius: 4px;
|
||
box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
.body-container--windows .tooltip, .body-container--windows #tooltip, .body-container--unknown-os .tooltip, .body-container--unknown-os #tooltip {
|
||
border-radius: 0;
|
||
}
|
||
|
||
.tooltip:not(.no-arrow).arrow-top, #tooltip:not(.no-arrow).arrow-top {
|
||
margin-top: 5px;
|
||
}
|
||
.tooltip:not(.no-arrow).arrow-top::before, #tooltip:not(.no-arrow).arrow-top::before {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
content: "";
|
||
top: -10px;
|
||
}
|
||
.tooltip:not(.no-arrow).arrow-top::before, #tooltip:not(.no-arrow).arrow-top::before {
|
||
border: 5px solid transparent;
|
||
border-bottom: 5px solid #282828;
|
||
}
|
||
.tooltip:not(.no-arrow).arrow-top::before, #tooltip:not(.no-arrow).arrow-top::before {
|
||
left: 50%;
|
||
margin-left: -5px;
|
||
margin-right: -5px;
|
||
}
|
||
|
||
.tooltip:not(.no-arrow).arrow-bottom, #tooltip:not(.no-arrow).arrow-bottom {
|
||
margin-bottom: 5px;
|
||
}
|
||
.tooltip:not(.no-arrow).arrow-bottom::before, #tooltip:not(.no-arrow).arrow-bottom::before {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
content: "";
|
||
bottom: -10px;
|
||
}
|
||
.tooltip:not(.no-arrow).arrow-bottom::before, #tooltip:not(.no-arrow).arrow-bottom::before {
|
||
border: 5px solid transparent;
|
||
border-top: 5px solid #282828;
|
||
}
|
||
.tooltip:not(.no-arrow).arrow-bottom::before, #tooltip:not(.no-arrow).arrow-bottom::before {
|
||
left: 50%;
|
||
margin-left: -5px;
|
||
margin-right: -5px;
|
||
}
|
||
|
||
.tooltip:not(.no-arrow).arrow-right, #tooltip:not(.no-arrow).arrow-right {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.tooltip:not(.no-arrow).arrow-right::before, #tooltip:not(.no-arrow).arrow-right::before {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
content: "";
|
||
top: 50%;
|
||
}
|
||
.tooltip:not(.no-arrow).arrow-right::before, #tooltip:not(.no-arrow).arrow-right::before {
|
||
border: 5px solid transparent;
|
||
margin-top: -5px;
|
||
margin-bottom: -5px;
|
||
}
|
||
.tooltip:not(.no-arrow).arrow-right::before, #tooltip:not(.no-arrow).arrow-right::before {
|
||
right: -10px;
|
||
border-left: 5px solid #282828;
|
||
}
|
||
|
||
.tooltip:not(.no-arrow).arrow-left, #tooltip:not(.no-arrow).arrow-left {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.tooltip:not(.no-arrow).arrow-left::before, #tooltip:not(.no-arrow).arrow-left::before {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
content: "";
|
||
top: 50%;
|
||
}
|
||
.tooltip:not(.no-arrow).arrow-left::before, #tooltip:not(.no-arrow).arrow-left::before {
|
||
border: 5px solid transparent;
|
||
margin-top: -5px;
|
||
margin-bottom: -5px;
|
||
}
|
||
.tooltip:not(.no-arrow).arrow-left::before, #tooltip:not(.no-arrow).arrow-left::before {
|
||
left: -10px;
|
||
border-right: 5px solid #282828;
|
||
}
|
||
|
||
.tooltip:not(.no-arrow).arrow-position-left::before, #tooltip:not(.no-arrow).arrow-position-left::before {
|
||
left: 20px;
|
||
}
|
||
|
||
.tooltip:not(.no-arrow).arrow-position-right::before, #tooltip:not(.no-arrow).arrow-position-right::before {
|
||
left: auto;
|
||
right: 20px;
|
||
}
|
||
|
||
.tooltip:not(.no-arrow).arrow-position-top::before, #tooltip:not(.no-arrow).arrow-position-top::before {
|
||
top: 20px;
|
||
}
|
||
.tooltip:not(.no-arrow).arrow-position-bottom::before, #tooltip:not(.no-arrow).arrow-position-bottom::before {
|
||
top: auto;
|
||
bottom: 20px;
|
||
}
|
||
|
||
.tooltip.text .tooltip-inner, .text#tooltip .tooltip-inner {
|
||
display: block;
|
||
}
|
||
|
||
.tooltip.text .tooltip-inner, .text#tooltip .tooltip-inner {
|
||
background-color: #282828;
|
||
text-align: center;
|
||
}
|
||
|
||
.tooltip-arrow-top, .tooltip-arrow-bottom {
|
||
height: 0;
|
||
position: absolute;
|
||
top: -5px;
|
||
display: none;
|
||
width: 0;
|
||
}
|
||
|
||
.tooltip-arrow-top, .tooltip-arrow-bottom {
|
||
border-bottom: 5px solid #282828;
|
||
}
|
||
|
||
.tooltip-arrow-top, .tooltip-arrow-bottom {
|
||
border-left: 5px solid transparent;
|
||
border-right: 5px solid transparent;
|
||
}
|
||
|
||
|
||
.tooltip-arrow-top.visible, .visible.tooltip-arrow-bottom {
|
||
display: block;
|
||
}
|
||
|
||
.tooltip-arrow-bottom {
|
||
bottom: -5px;
|
||
top: auto;
|
||
}
|
||
|
||
.tooltip-arrow-bottom {
|
||
border-top: 5px solid #282828;
|
||
border-bottom: 0;
|
||
}
|
||
|
||
@keyframes tooltipShow {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
50% {
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
#tooltip {
|
||
opacity: 0;
|
||
max-width: 350px;
|
||
backface-visibility: hidden;
|
||
}
|
||
|
||
#tooltip.visible {
|
||
opacity: 1;
|
||
}
|
||
|
||
#tooltip.visible {
|
||
animation: tooltipShow 1s ease forwards;
|
||
}
|
||
|
||
|
||
|
||
#tooltip.visible.instant {
|
||
opacity: 1;
|
||
}
|
||
|
||
#tooltip.visible.instant {
|
||
animation: none;
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* Popovers
|
||
*
|
||
* Add small overlays of content to any element for housing secondary information.
|
||
* You can also customize the position of the arrow.
|
||
*
|
||
* .arrow-top - Arrow up.
|
||
* .arrow-right - Arrow right.
|
||
* .arrow-bottom - Arrow down.
|
||
* .arrow-left - Arrow left
|
||
* .arrow-top.arrow-position-left - Arrow on top, left positioned.
|
||
* .arrow-right.arrow-position-top - Arrow on the right-hand side, top positioned.
|
||
* .arrow-bottom.arrow-position-right - Arrow on bottom, right positioned.
|
||
* .arrow-left.arrow-position-bottom - Arrow on the left-hand side, bottom positioned.
|
||
*
|
||
* Template: popovers
|
||
*
|
||
* Styleguide 50.4
|
||
*/
|
||
/**
|
||
* Split Popovers
|
||
*
|
||
* Sometimes the outside of your popover has to be drawn by an iFrame or by native code.
|
||
* This is how thats done. The interior corners are not rounded. The rounding
|
||
* must be done by the container.
|
||
*
|
||
* Template: popover-split
|
||
*
|
||
* .desktop - Used if the rounded corners are supplied in C++. 6 pixels off top and bottom.
|
||
*
|
||
* Styleguide 50.4.1
|
||
*/
|
||
/**
|
||
* Complex Popovers
|
||
*
|
||
* You can put lots in the popover!
|
||
*
|
||
* Template: popover-nav
|
||
* Data: demo-album
|
||
*
|
||
* Styleguide 50.4.2
|
||
*/
|
||
.popover {
|
||
position: absolute;
|
||
z-index: 1010;
|
||
display: none;
|
||
white-space: normal;
|
||
}
|
||
.popover {
|
||
background-color: #282828;
|
||
background-clip: padding-box;
|
||
border-radius: 8px;
|
||
}
|
||
.popover {
|
||
text-align: left;
|
||
}
|
||
|
||
.popover:not(.no-arrow).arrow-top {
|
||
margin-top: 10px;
|
||
}
|
||
.popover:not(.no-arrow).arrow-top::before {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
content: "";
|
||
top: -20px;
|
||
}
|
||
.popover:not(.no-arrow).arrow-top::before {
|
||
border: 10px solid transparent;
|
||
border-bottom: 10px solid #282828;
|
||
}
|
||
.popover:not(.no-arrow).arrow-top::before {
|
||
left: 50%;
|
||
margin-left: -10px;
|
||
margin-right: -10px;
|
||
}
|
||
|
||
.popover:not(.no-arrow).arrow-bottom {
|
||
margin-bottom: 10px;
|
||
}
|
||
.popover:not(.no-arrow).arrow-bottom::before {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
content: "";
|
||
bottom: -20px;
|
||
}
|
||
.popover:not(.no-arrow).arrow-bottom::before {
|
||
border: 10px solid transparent;
|
||
border-top: 10px solid #282828;
|
||
}
|
||
.popover:not(.no-arrow).arrow-bottom::before {
|
||
left: 50%;
|
||
margin-left: -10px;
|
||
margin-right: -10px;
|
||
}
|
||
|
||
.popover:not(.no-arrow).arrow-right {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.popover:not(.no-arrow).arrow-right::before {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
content: "";
|
||
top: 50%;
|
||
}
|
||
.popover:not(.no-arrow).arrow-right::before {
|
||
border: 10px solid transparent;
|
||
margin-top: -10px;
|
||
margin-bottom: -10px;
|
||
}
|
||
.popover:not(.no-arrow).arrow-right::before {
|
||
right: -20px;
|
||
border-left: 10px solid #282828;
|
||
}
|
||
|
||
.popover:not(.no-arrow).arrow-left {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.popover:not(.no-arrow).arrow-left::before {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
content: "";
|
||
top: 50%;
|
||
}
|
||
.popover:not(.no-arrow).arrow-left::before {
|
||
border: 10px solid transparent;
|
||
margin-top: -10px;
|
||
margin-bottom: -10px;
|
||
}
|
||
.popover:not(.no-arrow).arrow-left::before {
|
||
left: -20px;
|
||
border-right: 10px solid #282828;
|
||
}
|
||
|
||
.popover:not(.no-arrow).arrow-position-left::before {
|
||
left: 20px;
|
||
}
|
||
|
||
.popover:not(.no-arrow).arrow-position-right::before {
|
||
left: auto;
|
||
right: 20px;
|
||
}
|
||
|
||
.popover:not(.no-arrow).arrow-position-top::before {
|
||
top: 20px;
|
||
}
|
||
.popover:not(.no-arrow).arrow-position-bottom::before {
|
||
top: auto;
|
||
bottom: 20px;
|
||
}
|
||
.popover:not(.no-arrow).arrow-top::before {
|
||
border-bottom-color: #282828;
|
||
}
|
||
.popover.arrow-right.arrow-position-top::before {
|
||
border-left-color: #282828;
|
||
}
|
||
|
||
.popover.arrow-left.arrow-position-top::before {
|
||
border-right-color: #282828;
|
||
}
|
||
|
||
|
||
.body-container--windows .popover, .body-container--unknown-os .popover {
|
||
border-radius: 0;
|
||
}
|
||
|
||
.popover-title {
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-bold);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
line-height: 36px;
|
||
color: #ffffff;
|
||
position: relative;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.popover-title {
|
||
margin: 0;
|
||
padding: 2px 8px 0;
|
||
text-align: center;
|
||
background-color: #282828;
|
||
border-bottom: 1px solid #404040;
|
||
}
|
||
|
||
.popover.closeable .popover-title {
|
||
padding-left: 32px;
|
||
}
|
||
|
||
|
||
.popover-content, .popover-footer, .popover-addendum {
|
||
padding: 9px 14px;
|
||
}
|
||
|
||
.popover-footer {
|
||
padding-top: 0;
|
||
background-color: #282828;
|
||
}
|
||
|
||
.popover-footer {
|
||
text-align: right;
|
||
}
|
||
|
||
|
||
.popover-footer .button {
|
||
margin: 0 6px;
|
||
}
|
||
|
||
.popover-content-scroll-area {
|
||
height: 100%;
|
||
overflow: scroll;
|
||
}
|
||
|
||
.popover-content-scroll-area {
|
||
background-color: #181818;
|
||
}
|
||
|
||
/**
|
||
* This is a dark area a the bottom of a popover that should be used for fine print.
|
||
*/
|
||
.popover-addendum {
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
letter-spacing: 0.015em;
|
||
color: #b3b3b3;
|
||
}
|
||
.popover-addendum {
|
||
background-color: #282828;
|
||
border-top: 1px solid #181818;
|
||
}
|
||
|
||
|
||
/**
|
||
* Modals
|
||
*
|
||
* Styleguide 50.6
|
||
*/
|
||
/**
|
||
* Modal Popovers
|
||
*
|
||
* A modal is just a special popover case.<br>
|
||
* <a href="popover-modal.html" class="btn btn-info btn-large">See a modal in action</a>
|
||
*
|
||
* Styleguide 50.6.1
|
||
*/
|
||
.popover.modal {
|
||
overflow: auto;
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: 1040;
|
||
transition: opacity 0.3s linear, top 0.3s ease-out;
|
||
}
|
||
.popover.modal {
|
||
background-color: #181818;
|
||
}
|
||
.popover.modal {
|
||
right: 0;
|
||
left: 0;
|
||
box-shadow: 4px 6px 41px 0 rgba(0, 0, 0, 0.82);
|
||
}
|
||
|
||
.popover.modal.fade {
|
||
display: block;
|
||
top: -25%;
|
||
}
|
||
.popover.modal.fade.in {
|
||
top: 0;
|
||
}
|
||
|
||
.popover.modal.no-scroll {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal-open {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal-backdrop {
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: -9999;
|
||
opacity: 0;
|
||
transition: opacity 0.3s linear;
|
||
}
|
||
|
||
.modal-backdrop {
|
||
background-color: #000000;
|
||
}
|
||
|
||
.modal-backdrop {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
.modal-backdrop.dont-cover-player {
|
||
bottom: 88px;
|
||
}
|
||
@media (max-height: 768px) {
|
||
.modal-backdrop.dont-cover-player {
|
||
bottom: 72px;
|
||
}
|
||
}
|
||
.modal-backdrop.dont-cover-player.fade {
|
||
z-index: 1;
|
||
}
|
||
.modal-backdrop.fade {
|
||
z-index: 1040;
|
||
}
|
||
.modal-backdrop.fade.in {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.popover-title .spoticon-x-16 {
|
||
position: absolute;
|
||
top: 3px;
|
||
}
|
||
|
||
.popover-title .spoticon-x-16 {
|
||
right: 3px;
|
||
}
|
||
|
||
|
||
|
||
.popover.modal {
|
||
top: 50%;
|
||
width: 560px;
|
||
max-height: 465px;
|
||
bottom: auto;
|
||
}
|
||
|
||
.popover.modal {
|
||
margin-top: -232px;
|
||
}
|
||
|
||
.popover.modal {
|
||
left: 50%;
|
||
right: auto;
|
||
margin-left: -280px;
|
||
}
|
||
|
||
|
||
.popover.modal.fade {
|
||
top: 40%;
|
||
}
|
||
.popover.modal.fade.in {
|
||
top: 50%;
|
||
}
|
||
|
||
/**
|
||
* Generic modal
|
||
*
|
||
* A generic modal with a slight drop shadow and the ability to show a standardized title.
|
||
*
|
||
* Markup: <div class="modal modal-generic no-scroll">
|
||
* <div class="modal-generic-title">A title</div>
|
||
* <div class="modal-generic-content">And some content</div>
|
||
* </div>
|
||
*
|
||
* Styleguide 50.6.2
|
||
*/
|
||
.modal-generic {
|
||
background-color: #181818;
|
||
}
|
||
.modal-generic .modal-generic-title {
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-bold);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
}
|
||
.modal-generic .modal-generic-title {
|
||
background: #282828;
|
||
text-align: center;
|
||
padding: 10px;
|
||
}
|
||
|
||
.modal-generic .modal-generic-title .modal-dismiss-btn {
|
||
position: absolute;
|
||
top: 3px;
|
||
}
|
||
.modal-generic .modal-generic-title .modal-dismiss-btn {
|
||
right: 3px;
|
||
}
|
||
|
||
.modal-generic .modal-generic-content {
|
||
padding: 10px;
|
||
}
|
||
|
||
/**
|
||
* Generic error modal
|
||
*
|
||
* A standardized modal for displaying modal failures.
|
||
*
|
||
* Markup: <div class="modal modal-generic modal-generic-error no-scroll">Something failed to do something.</div>
|
||
*
|
||
* Styleguide 50.6.3
|
||
*/
|
||
.modal-generic-error {
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: none;
|
||
color: #ffffff;
|
||
}
|
||
.modal-generic-error {
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
/**
|
||
* Alerts
|
||
*
|
||
* Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
|
||
* To add a close-icon just add an element with the class .close
|
||
*
|
||
* Styleguide 50.5
|
||
*/
|
||
/**
|
||
* Contextual
|
||
*
|
||
* .alert-success - Successful message
|
||
* .alert-danger - Warning message
|
||
* .alert-info - Informational message
|
||
*
|
||
* Template: alerts
|
||
*
|
||
* Styleguide 50.5.1
|
||
*/
|
||
/**
|
||
* Contextual (two lines)
|
||
*
|
||
* .alert-success - Successful message
|
||
*
|
||
* Template: alerts-multiline
|
||
*
|
||
* Styleguide 50.5.1
|
||
*/
|
||
.alert {
|
||
color: #ffffff;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.alert {
|
||
padding: 6px 35px;
|
||
margin-bottom: 20px;
|
||
background-color: #2e77d0;
|
||
}
|
||
.alert .alert-link {
|
||
color: white;
|
||
}
|
||
.alert .alert-link:hover {
|
||
color: white;
|
||
}
|
||
.alert::before {
|
||
color: white;
|
||
}
|
||
.alert h4 {
|
||
color: inherit;
|
||
}
|
||
.alert h4 {
|
||
margin-top: 0;
|
||
}
|
||
.alert hr {
|
||
border-top-color: #296bbb;
|
||
}
|
||
.alert .close {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #b3b3b3;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
width: 32px;
|
||
color: #ffffff;
|
||
position: absolute;
|
||
top: 50%;
|
||
}
|
||
.alert .close {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: transparent;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
margin-top: -16px;
|
||
}
|
||
.alert .close {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.alert .close::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f160";
|
||
font-size: 16px;
|
||
line-height: inherit;
|
||
}
|
||
|
||
.alert .close .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.alert .close.contextmenu-active, .alert .close:not(:disabled):hover {
|
||
color: #ffffff;
|
||
}
|
||
.alert .close.contextmenu-active, .alert .close:not(:disabled):hover {
|
||
background-color: transparent;
|
||
}
|
||
.alert .close:not(:disabled):hover:active {
|
||
color: #b3b3b3;
|
||
}
|
||
.alert .close:not(:disabled):hover:active {
|
||
background: transparent;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.alert .close:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.alert .close {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.alert .close::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.alert .close::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.alert .close::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.alert .close.contextmenu-active, .alert .close:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.alert .close.contextmenu-active, .alert .close:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.alert .close.contextmenu-active, .alert .close:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.alert .close.contextmenu-active::after, .alert .close:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.alert .close.contextmenu-active::after, .alert .close:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.alert .close.contextmenu-active::after, .alert .close:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.alert .close:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.alert .close:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.alert .close::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
text-align: left/* rtl:ignore */;
|
||
line-height: 32px;
|
||
font-size: 16px;
|
||
padding-left: 8px /* rtl:ignore */;
|
||
width: calc(100% - 8px);
|
||
}
|
||
.alert .close::before {
|
||
border-radius: 500px;
|
||
}
|
||
.alert .close::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.alert .close.button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f132";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.alert .close.button-play.playing:not(:hover), .tl-row.playing .alert .close.button-play:not(:hover), .card.playing .alert .close.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.alert .close.button-play.playing:not(:hover)::after, .tl-row.playing .alert .close.button-play:not(:hover)::after, .card.playing .alert .close.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.alert .close.button-play.playing:not(:hover)::after, .tl-row.playing .alert .close.button-play:not(:hover)::after, .card.playing .alert .close.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.alert .close.button-play.playing:not(:hover)::after, .tl-row.playing .alert .close.button-play:not(:hover)::after, .card.playing .alert .close.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.alert .close.button-play.playing:not(:hover).contextmenu-active, .alert .close.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .alert .close.button-play:not(:hover).contextmenu-active, .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover, .card.playing .alert .close.button-play:not(:hover).contextmenu-active, .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.alert .close.button-play.playing:not(:hover).contextmenu-active::after, .alert .close.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .alert .close.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover::after, .card.playing .alert .close.button-play:not(:hover).contextmenu-active::after, .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.alert .close.button-play.playing:not(:hover).contextmenu-active, .alert .close.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .alert .close.button-play:not(:hover).contextmenu-active, .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover, .card.playing .alert .close.button-play:not(:hover).contextmenu-active, .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.alert .close.button-play.playing:not(:hover).contextmenu-active::after, .alert .close.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .alert .close.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover::after, .card.playing .alert .close.button-play:not(:hover).contextmenu-active::after, .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.alert .close.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover:active, .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.alert .close.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.alert .close.button-play.playing:not(:hover)::before, .tl-row.playing .alert .close.button-play:not(:hover)::before, .card.playing .alert .close.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.alert .close.button-play.playing:hover::before, .tl-row.playing .alert .close.button-play:hover::before, .card.playing .alert .close.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.tl-row.playing.alert .close.button-play:not(:hover), .card.playing.alert .close.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.alert .close.button-play:not(:hover)::after,
|
||
.card.playing.alert .close.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row.playing.alert .close.button-play:not(:hover)::after, .card.playing.alert .close.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.alert .close.button-play:not(:hover)::after, .card.playing.alert .close.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row.playing.alert .close.button-play:not(:hover).contextmenu-active, .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover, .card.playing.alert .close.button-play:not(:hover).contextmenu-active, .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.alert .close.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover::after, .card.playing.alert .close.button-play:not(:hover).contextmenu-active::after, .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row.playing.alert .close.button-play:not(:hover).contextmenu-active, .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover, .card.playing.alert .close.button-play:not(:hover).contextmenu-active, .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.alert .close.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover::after, .card.playing.alert .close.button-play:not(:hover).contextmenu-active::after, .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover:active, .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.alert .close.button-play:not(:hover)::before,
|
||
.card.playing.alert .close.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.tl-row.playing.alert .close.button-play:hover::before,
|
||
.card.playing.alert .close.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
|
||
.alert .close.contextmenu-active, .alert .close:not(:disabled):hover {
|
||
color: white;
|
||
}
|
||
.alert .close:not(:disabled):hover:active {
|
||
color: #cccccc;
|
||
}
|
||
.alert::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f11e";
|
||
font-size: 16px;
|
||
line-height: inherit;
|
||
}
|
||
.alert::before {
|
||
position: absolute;
|
||
top: 50%;
|
||
}
|
||
.alert::before {
|
||
margin-top: -9.5px;
|
||
}
|
||
.alert::before {
|
||
left: 10px;
|
||
}
|
||
|
||
.alert a {
|
||
color: #ffffff !important;
|
||
}
|
||
.alert a {
|
||
border-bottom: solid 1px #ffffff !important;
|
||
}
|
||
.alert.alert-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.alert.alert-icon {
|
||
border-radius: 4px;
|
||
padding: 8px 12px;
|
||
}
|
||
.alert.alert-icon {
|
||
text-align: left;
|
||
}
|
||
|
||
.alert.alert-icon svg {
|
||
flex-shrink: 0;
|
||
}
|
||
.alert.alert-icon::before {
|
||
display: none;
|
||
}
|
||
.alert.alert-icon *:not(:last-child) {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
|
||
.alert-success {
|
||
background-color: #1db954;
|
||
}
|
||
.alert-success .alert-link {
|
||
color: white;
|
||
}
|
||
.alert-success .alert-link:hover {
|
||
color: white;
|
||
}
|
||
.alert-success::before {
|
||
color: white;
|
||
}
|
||
|
||
.alert-danger {
|
||
background-color: #e22134;
|
||
}
|
||
.alert-danger .alert-link {
|
||
color: white;
|
||
}
|
||
.alert-danger .alert-link:hover {
|
||
color: white;
|
||
}
|
||
.alert-danger::before {
|
||
color: white;
|
||
}
|
||
|
||
.alert-info {
|
||
background-color: #2e77d0;
|
||
}
|
||
.alert-info .alert-link {
|
||
color: white;
|
||
}
|
||
.alert-info .alert-link:hover {
|
||
color: white;
|
||
}
|
||
.alert-info::before {
|
||
color: white;
|
||
}
|
||
|
||
/**
|
||
* Labels
|
||
*
|
||
* For labeling stuff...
|
||
*
|
||
* .label-danger - To indicate danger.
|
||
* .label-success - To indicate success.
|
||
* .label-warning - To warn...
|
||
* .label-info - To inform!
|
||
*
|
||
* Template: labels
|
||
*
|
||
* Styleguide 60.1
|
||
*/
|
||
.label {
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
letter-spacing: 0.015em;
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
display: inline;
|
||
line-height: 1;
|
||
color: #282828;
|
||
white-space: nowrap;
|
||
vertical-align: middle;
|
||
font-weight: var(--glue-font-weight-bold);
|
||
}
|
||
.label {
|
||
padding: 0.5em 0.6em 0.35em;
|
||
text-shadow: 0 0 #282828;
|
||
text-align: center;
|
||
background-color: #b3b3b3;
|
||
border-radius: 0.25em;
|
||
}
|
||
|
||
|
||
|
||
.label[href]:hover, .label[href]:focus {
|
||
color: #ffffff;
|
||
text-decoration: none;
|
||
}
|
||
.label[href]:hover, .label[href]:focus {
|
||
cursor: pointer;
|
||
background-color: #9a9a9a;
|
||
}
|
||
|
||
.label-danger {
|
||
background-color: #cd1a2b;
|
||
}
|
||
.label-danger[href]:hover, .label-danger[href]:focus {
|
||
background-color: #a01422;
|
||
}
|
||
|
||
.label-success {
|
||
background-color: #1db954;
|
||
}
|
||
.label-success[href]:hover, .label-success[href]:focus {
|
||
background-color: #168d40;
|
||
}
|
||
|
||
.label-warning {
|
||
background-color: #2e77d0;
|
||
}
|
||
.label-warning[href]:hover, .label-warning[href]:focus {
|
||
background-color: #255fa6;
|
||
}
|
||
|
||
.label-info {
|
||
background-color: #2e77d0;
|
||
}
|
||
.label-info[href]:hover, .label-info[href]:focus {
|
||
background-color: #255fa6;
|
||
}
|
||
|
||
/**
|
||
* Calendar icon
|
||
*
|
||
* Markup:
|
||
* <div class="calendar-icon">
|
||
* <div class="calendar-icon-month">Dec</div>
|
||
* <div class="calendar-icon-day">6</div>
|
||
* </div>
|
||
*
|
||
* Styleguide 60.3
|
||
*/
|
||
.calendar-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
font-weight: bold;
|
||
}
|
||
.calendar-icon {
|
||
text-align: center;
|
||
}
|
||
|
||
.calendar-icon-month {
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
letter-spacing: 0.015em;
|
||
text-transform: uppercase;
|
||
color: #ffffff;
|
||
height: 16px;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.calendar-icon-month {
|
||
background-color: #f80046;
|
||
}
|
||
|
||
|
||
.calendar-icon-day {
|
||
color: #282828;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
font-size: 22px;
|
||
}
|
||
|
||
.calendar-icon-day {
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
/**
|
||
* A large variant of the calendar icon
|
||
*/
|
||
.calendar-icon--lg {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
.calendar-icon--lg .calendar-icon-day {
|
||
height: 83px;
|
||
font-size: 64px;
|
||
line-height: 83px;
|
||
}
|
||
.calendar-icon--lg .calendar-icon-month {
|
||
height: 37px;
|
||
font-size: 20px;
|
||
line-height: 37px;
|
||
}
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
/**
|
||
* Slider
|
||
*
|
||
* Markup:
|
||
* <div class="slider {$modifiers}" onclick="this.className = 'slider enabled';"><div></div></div>
|
||
*
|
||
* .enabled - For sliders that are enabled
|
||
* .disabled - For sliders that are unchangeable
|
||
*
|
||
* Styleguide 60.4
|
||
*/
|
||
.slider {
|
||
height: 22px;
|
||
position: relative;
|
||
transition: border 1.2s linear;
|
||
transition: background 0.4s ease;
|
||
width: 36px;
|
||
}
|
||
.slider {
|
||
background: #000000;
|
||
border: 2px solid #404040;
|
||
border-radius: 11px;
|
||
}
|
||
.slider.enabled {
|
||
background: #1db954;
|
||
border-color: transparent;
|
||
}
|
||
.slider.enabled div {
|
||
background: #ffffff;
|
||
}
|
||
.slider.enabled div {
|
||
left: 15px;
|
||
}
|
||
|
||
.slider div {
|
||
height: 22px;
|
||
position: absolute;
|
||
top: -2px;
|
||
width: 22px;
|
||
transition: all 0.4s ease;
|
||
}
|
||
.slider div {
|
||
background: #b3b3b3;
|
||
border-radius: inherit;
|
||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.75), 0 0 3px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.slider div {
|
||
left: -5px;
|
||
}
|
||
|
||
.slider:active div {
|
||
width: 26px;
|
||
}
|
||
.slider:active div {
|
||
background: #ffffff;
|
||
}
|
||
.slider.enabled:active div {
|
||
left: 15px;
|
||
}
|
||
|
||
.slider:hover div {
|
||
background: #ffffff;
|
||
}
|
||
.slider.disabled {
|
||
pointer-events: none;
|
||
}
|
||
.slider.disabled {
|
||
background: #333333;
|
||
border-color: transparent;
|
||
}
|
||
.slider.disabled div {
|
||
background: #404040;
|
||
box-shadow: none;
|
||
}
|
||
.slider.disabled:active div {
|
||
width: 22px;
|
||
}
|
||
.slider.disabled:active div {
|
||
background: #404040;
|
||
}
|
||
.slider.disabled:hover div {
|
||
background: #404040;
|
||
}
|
||
.slider.disabled.enabled:active div {
|
||
left: 15px;
|
||
}
|
||
|
||
.slider:focus {
|
||
outline: 0;
|
||
}
|
||
|
||
/**
|
||
* Progress Bar
|
||
*
|
||
* The bar will occupy the full width of the parent container.
|
||
* When the progress bar is being used apply .active to the wrapper to make the
|
||
* handle look pressed. It will also enforce the expanded height while dragging.
|
||
*
|
||
* Length indication is controlled by setting the left property of the .handle and the
|
||
* inverted right value of the .inner bar (1% done is 99% etc).
|
||
*
|
||
* Currently used in the player (web) for song position.
|
||
*
|
||
* Markup:
|
||
* <div style="width: 150px;">
|
||
* <div class="progress-bar-wrapper {$modifiers}">
|
||
* <div class="progress-bar"><div class="inner"><div class="handle"></div></div></div>
|
||
* </div>
|
||
* </div>
|
||
*
|
||
* .active - To be controlled with JavaScript to indicate user interaction.
|
||
*
|
||
* Styleguide 60.5
|
||
*/
|
||
.progress-bar,
|
||
.progress-bar .inner {
|
||
height: 4px;
|
||
position: absolute;
|
||
top: 50%;
|
||
}
|
||
.progress-bar, .progress-bar .inner {
|
||
background: #404040;
|
||
border-radius: 2px;
|
||
margin-top: -2px;
|
||
}
|
||
|
||
.progress-bar .inner {
|
||
bottom: 0;
|
||
height: inherit;
|
||
position: absolute;
|
||
}
|
||
|
||
.progress-bar .inner {
|
||
background: #1ed760;
|
||
}
|
||
|
||
.progress-bar .handle {
|
||
display: block;
|
||
height: 12px;
|
||
opacity: 0;
|
||
position: absolute;
|
||
top: -4px;
|
||
width: 12px;
|
||
}
|
||
|
||
.progress-bar .handle {
|
||
background: #ffffff;
|
||
border-radius: 50%;
|
||
border: 3px solid #ffffff;
|
||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.progress-bar-wrapper {
|
||
height: 20px;
|
||
position: relative;
|
||
}
|
||
.progress-bar-wrapper.handle:hover .handle, .progress-bar-wrapper.active .handle {
|
||
opacity: 1;
|
||
}
|
||
.progress-bar-wrapper.active .handle {
|
||
background-color: #ffffff;
|
||
}
|
||
.progress-bar-wrapper.active .handle {
|
||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), inset 2px 2px 3px rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
.progress-bar-wrapper--ltr .progress-bar,
|
||
.progress-bar-wrapper--ltr .progress-bar .inner {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
.progress-bar-wrapper--ltr .progress-bar .inner {
|
||
left: 0;
|
||
right: auto;
|
||
}
|
||
.progress-bar-wrapper--ltr .progress-bar .handle {
|
||
right: -6px;
|
||
}
|
||
.progress-bar-wrapper--rtl .progress-bar,
|
||
.progress-bar-wrapper--rtl .progress-bar .inner {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
.progress-bar-wrapper--rtl .progress-bar .inner {
|
||
left: auto;
|
||
right: 0;
|
||
}
|
||
.progress-bar-wrapper--rtl .progress-bar .handle {
|
||
left: -6px;
|
||
}
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
.card {
|
||
position: relative;
|
||
}
|
||
|
||
.card-attention-highlight-box {
|
||
position: absolute;
|
||
top: -6px;
|
||
bottom: -6px;
|
||
opacity: 0;
|
||
transition: opacity 1000ms cubic-bezier(1, 0, 0.7, 1);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.card-attention-highlight-box {
|
||
border: 2px solid #2e77d0;
|
||
}
|
||
|
||
.card-attention-highlight-box {
|
||
right: -6px;
|
||
left: -6px;
|
||
}
|
||
|
||
|
||
|
||
.card-show-attention-highlight .card-attention-highlight-box {
|
||
transition: none;
|
||
opacity: 1;
|
||
}
|
||
|
||
.card-image-wrapper {
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.card-image-wrapper {
|
||
padding-bottom: 100%;
|
||
}
|
||
|
||
.card-image-hit-area {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.card-image-content-wrapper {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.card-image {
|
||
height: 100%;
|
||
position: absolute;
|
||
width: 100%;
|
||
}
|
||
|
||
.card-image {
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: cover;
|
||
}
|
||
|
||
.card-type-album .card-image, .card-type-collection-album .card-image, .card-type-track .card-image, .card-type-episode .card-image {
|
||
background-size: contain;
|
||
}
|
||
|
||
.image-delayed .card-image {
|
||
opacity: 0;
|
||
transition: opacity 50ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
|
||
.image-loaded.image-delayed .card-image {
|
||
opacity: 1;
|
||
}
|
||
|
||
.card-placeholder-wrapper {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.card-placeholder-wrapper {
|
||
background: #282828;
|
||
}
|
||
|
||
.card-image-link {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.card-image-link {
|
||
border: none;
|
||
}
|
||
|
||
.card-image-link {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
|
||
|
||
.card-type-artist .card-image, .card-type-artist .card-image-hit-area, .card-type-artist .card-overlay, .card-type-artist .card-placeholder-wrapper, .card-type-artist .card-image-link, .card-type-artist .card-hit-area-counter-scale, .card-type-collection-artist .card-image, .card-type-collection-artist .card-image-hit-area, .card-type-collection-artist .card-overlay, .card-type-collection-artist .card-placeholder-wrapper, .card-type-collection-artist .card-image-link, .card-type-collection-artist .card-hit-area-counter-scale, .card-type-user .card-image, .card-type-user .card-image-hit-area, .card-type-user .card-overlay, .card-type-user .card-placeholder-wrapper, .card-type-user .card-image-link, .card-type-user .card-hit-area-counter-scale {
|
||
border-radius: 500px;
|
||
}
|
||
|
||
.card-type-artist .card-image-hit-area,
|
||
.card-type-collection-artist .card-image-hit-area,
|
||
.card-type-user .card-image-hit-area {
|
||
width: auto;
|
||
height: auto;
|
||
top: 5%;
|
||
bottom: 5%;
|
||
}
|
||
|
||
.card-type-artist .card-image-hit-area, .card-type-collection-artist .card-image-hit-area, .card-type-user .card-image-hit-area {
|
||
right: 5%;
|
||
left: 5%;
|
||
}
|
||
|
||
|
||
|
||
.card-placeholder {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
display: none;
|
||
font-size: 9.5px;
|
||
height: 60%;
|
||
position: absolute;
|
||
text-anchor: middle;
|
||
top: 20%;
|
||
vertical-align: bottom;
|
||
width: 60%;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
.card-placeholder {
|
||
left: 20%;
|
||
}
|
||
|
||
|
||
|
||
.image-error .card-placeholder,
|
||
.no-image-url .card-placeholder {
|
||
display: inline-block;
|
||
}
|
||
|
||
.card-overlay {
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.card-overlay {
|
||
background: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
.card-overlay {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
|
||
.card-type-artist .card-overlay,
|
||
.card-type-collection-artist .card-overlay,
|
||
.card-type-user .card-overlay {
|
||
top: -1px;
|
||
bottom: -1px;
|
||
}
|
||
|
||
.card-type-artist .card-overlay, .card-type-collection-artist .card-overlay, .card-type-user .card-overlay {
|
||
right: -1px;
|
||
left: -1px;
|
||
}
|
||
|
||
|
||
|
||
.card-progress {
|
||
position: absolute;
|
||
bottom: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-progress {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
|
||
.card-progress__bar {
|
||
--progress: 0;
|
||
/* [1] */
|
||
width: calc(var(--progress) * 100%);
|
||
height: 8px;
|
||
}
|
||
|
||
.card-progress__bar {
|
||
background-color: #2e77d0;
|
||
}
|
||
|
||
.card-button-add,
|
||
.card-button-play,
|
||
.card-button-more {
|
||
max-height: none;
|
||
position: absolute;
|
||
top: 50%;
|
||
visibility: hidden;
|
||
z-index: 4;
|
||
}
|
||
|
||
.card-button-add, .card-button-play, .card-button-more {
|
||
box-shadow: none;
|
||
cursor: default;
|
||
}
|
||
.card-button-add:focus,
|
||
.card-button-play:focus,
|
||
.card-button-more:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.card-button-add {
|
||
top: 50%;
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #b3b3b3;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
width: 32px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.card-button-add {
|
||
margin-top: -16px;
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: transparent;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
|
||
.card-button-add {
|
||
left: calc((50% - 28px) / 2);
|
||
margin-left: -16px;
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
|
||
|
||
.card-button-add .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.card-button-add.contextmenu-active, .card-button-add:not(:disabled):hover {
|
||
color: #ffffff;
|
||
}
|
||
.card-button-add.contextmenu-active, .card-button-add:not(:disabled):hover {
|
||
background-color: transparent;
|
||
}
|
||
.card-button-add:not(:disabled):hover:active {
|
||
color: #b3b3b3;
|
||
}
|
||
.card-button-add:not(:disabled):hover:active {
|
||
background: transparent;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-button-add:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-button-add {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.card-button-add::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.card-button-add::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-button-add::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.card-button-add.contextmenu-active, .card-button-add:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.card-button-add.contextmenu-active, .card-button-add:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-button-add.contextmenu-active, .card-button-add:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.card-button-add.contextmenu-active::after, .card-button-add:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.card-button-add.contextmenu-active::after, .card-button-add:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-button-add.contextmenu-active::after, .card-button-add:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.card-button-add:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.card-button-add:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.card-button-add::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
text-align: left/* rtl:ignore */;
|
||
line-height: 32px;
|
||
font-size: 16px;
|
||
padding-left: 8px /* rtl:ignore */;
|
||
width: calc(100% - 8px);
|
||
}
|
||
.card-button-add::before {
|
||
border-radius: 500px;
|
||
}
|
||
.card-button-add::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.card-button-add.button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f132";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.card-button-add.button-play.playing:not(:hover), .tl-row.playing .card-button-add.button-play:not(:hover), .card.playing .card-button-add.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-button-add.button-play.playing:not(:hover)::after, .tl-row.playing .card-button-add.button-play:not(:hover)::after, .card.playing .card-button-add.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.card-button-add.button-play.playing:not(:hover)::after, .tl-row.playing .card-button-add.button-play:not(:hover)::after, .card.playing .card-button-add.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-button-add.button-play.playing:not(:hover)::after, .tl-row.playing .card-button-add.button-play:not(:hover)::after, .card.playing .card-button-add.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.card-button-add.button-play.playing:not(:hover).contextmenu-active, .card-button-add.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card-button-add.button-play:not(:hover).contextmenu-active, .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover, .card.playing .card-button-add.button-play:not(:hover).contextmenu-active, .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.card-button-add.button-play.playing:not(:hover).contextmenu-active::after, .card-button-add.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card-button-add.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card-button-add.button-play:not(:hover).contextmenu-active::after, .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-button-add.button-play.playing:not(:hover).contextmenu-active, .card-button-add.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card-button-add.button-play:not(:hover).contextmenu-active, .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover, .card.playing .card-button-add.button-play:not(:hover).contextmenu-active, .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-button-add.button-play.playing:not(:hover).contextmenu-active::after, .card-button-add.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card-button-add.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card-button-add.button-play:not(:hover).contextmenu-active::after, .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.card-button-add.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover:active, .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-button-add.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-button-add.button-play.playing:not(:hover)::before, .tl-row.playing .card-button-add.button-play:not(:hover)::before, .card.playing .card-button-add.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.card-button-add.button-play.playing:hover::before, .tl-row.playing .card-button-add.button-play:hover::before, .card.playing .card-button-add.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.tl-row.playing.card-button-add.button-play:not(:hover), .card.playing.card-button-add.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-button-add.button-play:not(:hover)::after,
|
||
.card.playing.card-button-add.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row.playing.card-button-add.button-play:not(:hover)::after, .card.playing.card-button-add.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-button-add.button-play:not(:hover)::after, .card.playing.card-button-add.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row.playing.card-button-add.button-play:not(:hover).contextmenu-active, .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover, .card.playing.card-button-add.button-play:not(:hover).contextmenu-active, .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-button-add.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card-button-add.button-play:not(:hover).contextmenu-active::after, .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row.playing.card-button-add.button-play:not(:hover).contextmenu-active, .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover, .card.playing.card-button-add.button-play:not(:hover).contextmenu-active, .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-button-add.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card-button-add.button-play:not(:hover).contextmenu-active::after, .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover:active, .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-button-add.button-play:not(:hover)::before,
|
||
.card.playing.card-button-add.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.tl-row.playing.card-button-add.button-play:hover::before,
|
||
.card.playing.card-button-add.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
|
||
.card-button-add.active {
|
||
color: #1ed760;
|
||
}
|
||
.card-button-add.active.contextmenu-active, .card-button-add.active:not(:disabled):hover {
|
||
color: #1df369;
|
||
}
|
||
.card-button-add.active:not(:disabled):hover:active {
|
||
color: #18ac4d;
|
||
}
|
||
.card-button-add.drop-target-active {
|
||
color: #000000;
|
||
}
|
||
.card-button-add.drop-target-active {
|
||
background-color: #1ed760;
|
||
}
|
||
.card-button-add.drop-target-active.contextmenu-active, .card-button-add.drop-target-active:not(:disabled):hover {
|
||
color: #000000;
|
||
}
|
||
.card-button-add.drop-target-active:not(:disabled):hover:active {
|
||
color: black;
|
||
}
|
||
.card-button-add.drop-target-active.contextmenu-active, .card-button-add.drop-target-active:not(:disabled):hover {
|
||
background-color: #1ed760;
|
||
}
|
||
.card-button-add::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f162";
|
||
font-size: 24px;
|
||
line-height: inherit;
|
||
}
|
||
.card-button-add::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f3DB";
|
||
font-size: 24px;
|
||
line-height: inherit;
|
||
}
|
||
|
||
.card .card-button-play {
|
||
height: 56px;
|
||
line-height: 54px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
width: 56px;
|
||
}
|
||
|
||
.card .card-button-play {
|
||
padding-top: 1px;
|
||
border-radius: 28px;
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
|
||
.card .card-button-play {
|
||
left: 50%;
|
||
margin: -28px 0 0 -28px;
|
||
padding-left: 56px;
|
||
padding-right: 56px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
|
||
|
||
.card .card-button-play .b-alt-text {
|
||
margin-top: -54px;
|
||
}
|
||
.card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
|
||
background-color: rgba(24, 24, 24, 0.7);
|
||
}
|
||
.card .card-button-play:not(:disabled):hover:active {
|
||
color: #b3b3b3;
|
||
}
|
||
.card .card-button-play:not(:disabled):hover:active {
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card .card-button-play:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card .card-button-play {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.card .card-button-play::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.card .card-button-play::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card .card-button-play::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.card .card-button-play.contextmenu-active::after, .card .card-button-play:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.card .card-button-play.contextmenu-active::after, .card .card-button-play:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card .card-button-play.contextmenu-active::after, .card .card-button-play:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.card .card-button-play:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.card .card-button-play:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.card .card-button-play::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.card .card-button-play::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.card .card-button-play::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
|
||
}
|
||
.card .card-button-play.contextmenu-active::after, .card .card-button-play:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
.card .card-button-play.contextmenu-active::after, .card .card-button-play:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
}
|
||
.card .card-button-play:not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.card .card-button-play:not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
|
||
transform: scale(1.0714285714);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card .card-button-play.contextmenu-active, .card .card-button-play:not(:disabled):hover {
|
||
transform: scale(1.0714285714);
|
||
}
|
||
}
|
||
.card .card-button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
text-align: left/* rtl:ignore */;
|
||
line-height: 56px;
|
||
font-size: 28px;
|
||
padding-left: 14px /* rtl:ignore */;
|
||
width: calc(100% - 14px);
|
||
}
|
||
.card .card-button-play::before {
|
||
border-radius: 500px;
|
||
}
|
||
.card .card-button-play::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.card .card-button-play.button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1C8";
|
||
font-size: 28px;
|
||
line-height: 56px;
|
||
}
|
||
.card .card-button-play.button-play.playing:not(:hover), .tl-row.playing .card .card-button-play.button-play:not(:hover), .card.playing .card .card-button-play.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card .card-button-play.button-play.playing:not(:hover)::after, .tl-row.playing .card .card-button-play.button-play:not(:hover)::after, .card.playing .card .card-button-play.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.card .card-button-play.button-play.playing:not(:hover)::after, .tl-row.playing .card .card-button-play.button-play:not(:hover)::after, .card.playing .card .card-button-play.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card .card-button-play.button-play.playing:not(:hover)::after, .tl-row.playing .card .card-button-play.button-play:not(:hover)::after, .card.playing .card .card-button-play.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.card .card-button-play.button-play.playing:not(:hover).contextmenu-active, .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing .card .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.card .card-button-play.button-play.playing:not(:hover).contextmenu-active::after, .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card .card-button-play.button-play.playing:not(:hover).contextmenu-active, .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing .card .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card .card-button-play.button-play.playing:not(:hover).contextmenu-active::after, .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover:active, .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card .card-button-play.button-play.playing:not(:hover)::before, .tl-row.playing .card .card-button-play.button-play:not(:hover)::before, .card.playing .card .card-button-play.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1DB";
|
||
font-size: 28px;
|
||
line-height: 56px;
|
||
}
|
||
.card .card-button-play.button-play.playing:hover::before, .tl-row.playing .card .card-button-play.button-play:hover::before, .card.playing .card .card-button-play.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1D3";
|
||
font-size: 28px;
|
||
line-height: 56px;
|
||
}
|
||
.tl-row.playing.card .card-button-play.button-play:not(:hover), .card.playing.card .card-button-play.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card .card-button-play.button-play:not(:hover)::after,
|
||
.card.playing.card .card-button-play.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row.playing.card .card-button-play.button-play:not(:hover)::after, .card.playing.card .card-button-play.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card .card-button-play.button-play:not(:hover)::after, .card.playing.card .card-button-play.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row.playing.card .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing.card .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row.playing.card .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing.card .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover:active, .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card .card-button-play.button-play:not(:hover)::before,
|
||
.card.playing.card .card-button-play.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1DB";
|
||
font-size: 28px;
|
||
line-height: 56px;
|
||
}
|
||
.tl-row.playing.card .card-button-play.button-play:hover::before,
|
||
.card.playing.card .card-button-play.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1D3";
|
||
font-size: 28px;
|
||
line-height: 56px;
|
||
}
|
||
|
||
.card .card-button-play::before {
|
||
content: "\f1C8";
|
||
}
|
||
.card .card-button-play:hover {
|
||
background: rgba(0, 0, 0, 0.75) !important;
|
||
border-color: #ffffff;
|
||
}
|
||
.card .card-button-play:active {
|
||
color: #999999;
|
||
}
|
||
.card .card-button-play:active {
|
||
background: rgba(0, 0, 0, 0.75) !important;
|
||
border-color: #999999;
|
||
}
|
||
|
||
.card-type-user .card-overlay,
|
||
.card-type-user .card-button-play {
|
||
display: none;
|
||
}
|
||
|
||
.card-button-more {
|
||
top: 50%;
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #b3b3b3;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
width: 32px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.card-button-more {
|
||
margin-top: -16px;
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: transparent;
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
|
||
.card-button-more {
|
||
right: calc((50% - 28px) / 2);
|
||
margin-right: -16px;
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
|
||
|
||
.card-button-more .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.card-button-more.contextmenu-active, .card-button-more:not(:disabled):hover {
|
||
color: #ffffff;
|
||
}
|
||
.card-button-more.contextmenu-active, .card-button-more:not(:disabled):hover {
|
||
background-color: transparent;
|
||
}
|
||
.card-button-more:not(:disabled):hover:active {
|
||
color: #b3b3b3;
|
||
}
|
||
.card-button-more:not(:disabled):hover:active {
|
||
background: transparent;
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-button-more:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-button-more {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.card-button-more::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.card-button-more::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-button-more::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.card-button-more.contextmenu-active, .card-button-more:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.card-button-more.contextmenu-active, .card-button-more:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-button-more.contextmenu-active, .card-button-more:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.card-button-more.contextmenu-active::after, .card-button-more:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.card-button-more.contextmenu-active::after, .card-button-more:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-button-more.contextmenu-active::after, .card-button-more:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.card-button-more:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.card-button-more:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.card-button-more::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
text-align: left/* rtl:ignore */;
|
||
line-height: 32px;
|
||
font-size: 16px;
|
||
padding-left: 8px /* rtl:ignore */;
|
||
width: calc(100% - 8px);
|
||
}
|
||
.card-button-more::before {
|
||
border-radius: 500px;
|
||
}
|
||
.card-button-more::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.card-button-more.button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f132";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.card-button-more.button-play.playing:not(:hover), .tl-row.playing .card-button-more.button-play:not(:hover), .card.playing .card-button-more.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-button-more.button-play.playing:not(:hover)::after, .tl-row.playing .card-button-more.button-play:not(:hover)::after, .card.playing .card-button-more.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.card-button-more.button-play.playing:not(:hover)::after, .tl-row.playing .card-button-more.button-play:not(:hover)::after, .card.playing .card-button-more.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-button-more.button-play.playing:not(:hover)::after, .tl-row.playing .card-button-more.button-play:not(:hover)::after, .card.playing .card-button-more.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.card-button-more.button-play.playing:not(:hover).contextmenu-active, .card-button-more.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card-button-more.button-play:not(:hover).contextmenu-active, .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover, .card.playing .card-button-more.button-play:not(:hover).contextmenu-active, .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.card-button-more.button-play.playing:not(:hover).contextmenu-active::after, .card-button-more.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card-button-more.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card-button-more.button-play:not(:hover).contextmenu-active::after, .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-button-more.button-play.playing:not(:hover).contextmenu-active, .card-button-more.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card-button-more.button-play:not(:hover).contextmenu-active, .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover, .card.playing .card-button-more.button-play:not(:hover).contextmenu-active, .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-button-more.button-play.playing:not(:hover).contextmenu-active::after, .card-button-more.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card-button-more.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card-button-more.button-play:not(:hover).contextmenu-active::after, .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.card-button-more.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover:active, .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-button-more.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-button-more.button-play.playing:not(:hover)::before, .tl-row.playing .card-button-more.button-play:not(:hover)::before, .card.playing .card-button-more.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.card-button-more.button-play.playing:hover::before, .tl-row.playing .card-button-more.button-play:hover::before, .card.playing .card-button-more.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.tl-row.playing.card-button-more.button-play:not(:hover), .card.playing.card-button-more.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-button-more.button-play:not(:hover)::after,
|
||
.card.playing.card-button-more.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row.playing.card-button-more.button-play:not(:hover)::after, .card.playing.card-button-more.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-button-more.button-play:not(:hover)::after, .card.playing.card-button-more.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row.playing.card-button-more.button-play:not(:hover).contextmenu-active, .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover, .card.playing.card-button-more.button-play:not(:hover).contextmenu-active, .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-button-more.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card-button-more.button-play:not(:hover).contextmenu-active::after, .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row.playing.card-button-more.button-play:not(:hover).contextmenu-active, .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover, .card.playing.card-button-more.button-play:not(:hover).contextmenu-active, .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-button-more.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card-button-more.button-play:not(:hover).contextmenu-active::after, .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover:active, .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-button-more.button-play:not(:hover)::before,
|
||
.card.playing.card-button-more.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.tl-row.playing.card-button-more.button-play:hover::before,
|
||
.card.playing.card-button-more.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
|
||
.card-button-more.active {
|
||
color: #1ed760;
|
||
}
|
||
.card-button-more.active.contextmenu-active, .card-button-more.active:not(:disabled):hover {
|
||
color: #1df369;
|
||
}
|
||
.card-button-more.active:not(:disabled):hover:active {
|
||
color: #18ac4d;
|
||
}
|
||
.card-button-more.drop-target-active {
|
||
color: #000000;
|
||
}
|
||
.card-button-more.drop-target-active {
|
||
background-color: #1ed760;
|
||
}
|
||
.card-button-more.drop-target-active.contextmenu-active, .card-button-more.drop-target-active:not(:disabled):hover {
|
||
color: #000000;
|
||
}
|
||
.card-button-more.drop-target-active:not(:disabled):hover:active {
|
||
color: black;
|
||
}
|
||
.card-button-more.drop-target-active.contextmenu-active, .card-button-more.drop-target-active:not(:disabled):hover {
|
||
background-color: #1ed760;
|
||
}
|
||
.card-button-more::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f1CC";
|
||
font-size: 24px;
|
||
line-height: inherit;
|
||
}
|
||
|
||
.card.added .card-button-add::before {
|
||
content: "\f1C9" !important;
|
||
}
|
||
.card.added .card-button-add:hover:not(.just-changed):not(.stay-added)::before {
|
||
content: "\f1C5" !important;
|
||
}
|
||
.card.added .card-button-add::before {
|
||
content: "\f3DC" !important;
|
||
color: #ffffff;
|
||
}
|
||
:not(.unlike-removes-entity) .card.added .card-button-add:hover:not(.just-changed):not(.stay-added)::before {
|
||
content: "\f3DC" !important;
|
||
}
|
||
|
||
.card {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
|
||
.card {
|
||
transition-property: transform, opacity;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.card .card-info-wrapper,
|
||
.card .card-image-wrapper {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.card .card-info-wrapper, .card .card-image-wrapper {
|
||
transition-property: transform, opacity;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card .card-info-wrapper, .card .card-image-wrapper {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.card.pressed {
|
||
transition: none;
|
||
}
|
||
.card.pressed {
|
||
transform: scale(0.97);
|
||
}
|
||
.card.pressed .card-info-wrapper,
|
||
.card.pressed .card-image-wrapper {
|
||
transition: none;
|
||
opacity: 0.7;
|
||
}
|
||
.card a .card-hit-area-counter-scale,
|
||
.card a .card-hit-area-counter-scale-left,
|
||
.card a .card-hit-area-counter-scale-right {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
}
|
||
.card a .card-hit-area-counter-scale, .card a .card-hit-area-counter-scale-left, .card a .card-hit-area-counter-scale-right {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.card.pressed a .card-hit-area-counter-scale {
|
||
transform: scale(1.5);
|
||
}
|
||
.card.pressed a .card-hit-area-counter-scale-left {
|
||
transform: scale(1.5);
|
||
}
|
||
.card.pressed a .card-hit-area-counter-scale-left {
|
||
transform-origin: right;
|
||
}
|
||
|
||
.card.pressed a .card-hit-area-counter-scale-right {
|
||
transform: scale(1.5);
|
||
}
|
||
.card.pressed a .card-hit-area-counter-scale-right {
|
||
transform-origin: left;
|
||
}
|
||
|
||
|
||
.card-image-hit-area:not(.no-hover):hover .card-overlay,
|
||
.card-image-hit-area:not(.no-hover):hover .card-button-add,
|
||
.card-image-hit-area:not(.no-hover):hover .card-button-play,
|
||
.card-image-hit-area:not(.no-hover):hover .card-button-more,
|
||
.card-image-wrapper.contextmenu-active .card-overlay,
|
||
.card-image-wrapper.contextmenu-active .card-button-add,
|
||
.card-image-wrapper.contextmenu-active .card-button-play,
|
||
.card-image-wrapper.contextmenu-active .card-button-more,
|
||
.card:not(.card-horizontal).pressed .card-overlay,
|
||
.card:not(.card-horizontal).pressed .card-button-add,
|
||
.card:not(.card-horizontal).pressed .card-button-play,
|
||
.card:not(.card-horizontal).pressed .card-button-more {
|
||
visibility: visible;
|
||
}
|
||
|
||
.card .album-placeholder,
|
||
.card .track-placeholder,
|
||
.card .artist-placeholder,
|
||
.card .playlist-placeholder,
|
||
.card .playlist-folder-placeholder,
|
||
.card .user-placeholder,
|
||
.card .genre-placeholder,
|
||
.card .collection-placeholder,
|
||
.card .local-files-placeholder,
|
||
.card .episode-placeholder {
|
||
display: none;
|
||
fill: #404040;
|
||
}
|
||
|
||
.card-type-album .album-placeholder,
|
||
.card-type-collection-album .album-placeholder {
|
||
display: block;
|
||
}
|
||
|
||
.card-type-track .track-placeholder {
|
||
display: block;
|
||
}
|
||
|
||
.card-type-artist .artist-placeholder,
|
||
.card-type-collection-artist .artist-placeholder {
|
||
display: block;
|
||
}
|
||
|
||
.card-type-playlist .playlist-placeholder {
|
||
display: block;
|
||
}
|
||
|
||
.card-type-playlist-folder .playlist-folder-placeholder {
|
||
display: block;
|
||
}
|
||
|
||
.card-type-user .user-placeholder {
|
||
display: block;
|
||
}
|
||
|
||
.card-type-genre .genre-placeholder {
|
||
display: block;
|
||
}
|
||
|
||
.card-type-collection .collection-placeholder {
|
||
display: block;
|
||
}
|
||
|
||
.card-type-local-files .local-files-placeholder {
|
||
display: block;
|
||
}
|
||
|
||
.card-type-episode .episode-placeholder {
|
||
display: block;
|
||
}
|
||
|
||
.card-info-wrapper {
|
||
height: 54px;
|
||
}
|
||
|
||
.card-info-wrapper {
|
||
margin-top: 10px;
|
||
}
|
||
.card-info-wrapper.card-info-with-subtitle-links {
|
||
height: 74px;
|
||
}
|
||
.card-info-wrapper.card-info-with-description {
|
||
height: 119px;
|
||
}
|
||
.card-info-wrapper.card-info-with-metadata {
|
||
height: 76px;
|
||
}
|
||
.card-info-wrapper.card-info-with-description.card-info-with-metadata {
|
||
height: 141px;
|
||
}
|
||
.card-info-wrapper.card-info-with-subtitle-links.card-info-with-metadata {
|
||
height: 96px;
|
||
}
|
||
|
||
.card-type-artist:not(.card-horizontal) .card-info-wrapper, .card-type-collection-artist:not(.card-horizontal) .card-info-wrapper, .card-type-user:not(.card-horizontal) .card-info-wrapper {
|
||
text-align: center;
|
||
}
|
||
|
||
.card-info-title {
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-bold);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.card-info-title {
|
||
padding-bottom: 3px;
|
||
}
|
||
|
||
.card-info-title a {
|
||
color: #ffffff;
|
||
}
|
||
.card-info-title a:hover:active {
|
||
color: #b3b3b3;
|
||
}
|
||
|
||
.card-info-subtitle-links {
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: none;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: #b3b3b3;
|
||
}
|
||
|
||
.card-info-subtitle-links {
|
||
padding-bottom: 3px;
|
||
margin-bottom: -3px;
|
||
}
|
||
|
||
.card-info-subtitle-links a {
|
||
color: #b3b3b3;
|
||
}
|
||
.card-info-subtitle-links a:hover {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.card-info-subtitle-metadata {
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow-wrap: break-word;
|
||
color: #b3b3b3;
|
||
}
|
||
|
||
.card-info-subtitle-metadata {
|
||
margin-top: 4px;
|
||
}
|
||
|
||
|
||
.card-info-subtitle-metadata .card-info-subtitle-new-mark {
|
||
display: inline-block;
|
||
}
|
||
.card-info-subtitle-metadata .card-info-subtitle-new-mark {
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.card-info-subtitle-metadata .card-info-subtitle-new-mark::before {
|
||
content: "";
|
||
display: inline-block;
|
||
height: 8px;
|
||
width: 8px;
|
||
line-height: 8px;
|
||
}
|
||
.card-info-subtitle-metadata .card-info-subtitle-new-mark::before {
|
||
background-color: #2e77d0;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.card-info-subtitle-description {
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: none;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow-wrap: break-word;
|
||
color: #b3b3b3;
|
||
}
|
||
|
||
.card-info-subtitle-description {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
|
||
.card.playing .card-info-title,
|
||
.card.paused .card-info-title,
|
||
.playing .card .card-info-title,
|
||
.paused .card .card-info-title {
|
||
color: #1db954;
|
||
}
|
||
.card.playing .card-info-title a,
|
||
.card.paused .card-info-title a,
|
||
.playing .card .card-info-title a,
|
||
.paused .card .card-info-title a {
|
||
color: #1db954;
|
||
}
|
||
.card.playing .card-info-title a:hover,
|
||
.card.paused .card-info-title a:hover,
|
||
.playing .card .card-info-title a:hover,
|
||
.paused .card .card-info-title a:hover {
|
||
color: #1ed760;
|
||
}
|
||
|
||
.card.playing .card-button-play,
|
||
.playing .card .card-button-play {
|
||
visibility: visible;
|
||
}
|
||
|
||
.card-type-station:not(.card-type-station-cluster) .card-station-layer {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
}
|
||
|
||
.card-type-station:not(.card-type-station-cluster) .card-station-layer {
|
||
background-position: center;
|
||
background-size: cover;
|
||
}
|
||
.card-type-station:not(.card-type-station-cluster) .card-image-content-wrapper {
|
||
overflow: hidden;
|
||
}
|
||
.card-type-station:not(.card-type-station-cluster) .card-image {
|
||
filter: blur(40px);
|
||
}
|
||
.card-type-station:not(.card-type-station-cluster) .card-image {
|
||
background-size: 500%;
|
||
}
|
||
.card-type-station:not(.card-type-station-cluster) .card-station-highlight {
|
||
opacity: 0.6;
|
||
}
|
||
.card-type-station:not(.card-type-station-cluster) .card-station-mask {
|
||
background-image: url("https://local_resource_host/images/station-wave.svg");
|
||
}
|
||
.card-type-station:not(.card-type-station-cluster) .card-station-overlay {
|
||
position: absolute;
|
||
}
|
||
.card-type-station:not(.card-type-station-cluster) .card-station-overlay {
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.card-type-station:not(.card-type-station-cluster) .card-station-overlay {
|
||
height: 46.46%;
|
||
top: 26.77%;
|
||
width: 46.46%;
|
||
}
|
||
.card-type-station:not(.card-type-station-cluster) .card-station-overlay {
|
||
left: 26.77%;
|
||
}
|
||
|
||
.card-type-station:not(.card-type-station-cluster).card-type-station-artist .card-station-overlay {
|
||
height: 51.52%;
|
||
top: 24.24%;
|
||
width: 51.52%;
|
||
}
|
||
.card-type-station:not(.card-type-station-cluster).card-type-station-artist .card-station-overlay {
|
||
border-radius: 500px;
|
||
}
|
||
.card-type-station:not(.card-type-station-cluster).card-type-station-artist .card-station-overlay {
|
||
left: 24.24%;
|
||
}
|
||
|
||
|
||
.card-video .card-image-wrapper {
|
||
padding-bottom: 56.25%;
|
||
}
|
||
|
||
.card-horizontal {
|
||
position: relative;
|
||
}
|
||
.card-horizontal > .card-horizontal-interior-wrapper {
|
||
position: relative;
|
||
}
|
||
.card-horizontal > .card-horizontal-interior-wrapper {
|
||
border: 0;
|
||
}
|
||
.card-horizontal > .card-horizontal-interior-wrapper:hover, .card-horizontal > .card-horizontal-interior-wrapper:active {
|
||
background-color: #282828;
|
||
}
|
||
.card-horizontal.pressed > .card-horizontal-interior-wrapper, .card-horizontal.contextmenu-active > .card-horizontal-interior-wrapper {
|
||
background-color: #282828;
|
||
}
|
||
.card-horizontal .card-image-wrapper {
|
||
width: 96px;
|
||
height: 96px;
|
||
}
|
||
.card-horizontal .card-image-wrapper {
|
||
padding-bottom: 0;
|
||
}
|
||
.card-horizontal .card-image-wrapper {
|
||
float: left;
|
||
}
|
||
|
||
.card-horizontal.card-video .card-image-wrapper {
|
||
width: 170.6666666667px;
|
||
}
|
||
.card-horizontal .card-info-wrapper {
|
||
height: 96px;
|
||
position: relative;
|
||
}
|
||
.card-horizontal .card-info-wrapper {
|
||
padding: 0;
|
||
}
|
||
.card-horizontal .card-info-wrapper {
|
||
margin-left: 96px;
|
||
}
|
||
|
||
.card-horizontal .card-info-wrapper > a {
|
||
border: none;
|
||
}
|
||
.card-horizontal .card-info-content-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
height: 96px;
|
||
}
|
||
.card-horizontal .card-info-content-wrapper {
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
}
|
||
|
||
.card-horizontal.card-hidden-image .card-info-wrapper {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.card-horizontal.card-hidden-image .card-info-wrapper .card-info-content-wrapper {
|
||
padding-left: 0;
|
||
}
|
||
|
||
.card-horizontal .card-info-subtitle-description {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow-wrap: break-word;
|
||
}
|
||
.card-horizontal .card-info-title {
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-bold);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
display: flex;
|
||
}
|
||
|
||
.card-horizontal .card-info-title-text {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.card-horizontal.card-type-artist .card-image-link, .card-horizontal.card-type-artist .card-hit-area-counter-scale, .card-horizontal.card-type-collection-artist .card-image-link, .card-horizontal.card-type-collection-artist .card-hit-area-counter-scale, .card-horizontal.card-type-user .card-image-link, .card-horizontal.card-type-user .card-hit-area-counter-scale {
|
||
border-radius: 0;
|
||
}
|
||
.card-horizontal.card-type-artist .card-image-hit-area, .card-horizontal.card-type-collection-artist .card-image-hit-area, .card-horizontal.card-type-user .card-image-hit-area {
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.card-horizontal.card-type-artist .card-image-hit-area, .card-horizontal.card-type-collection-artist .card-image-hit-area, .card-horizontal.card-type-user .card-image-hit-area {
|
||
border-radius: 0;
|
||
}
|
||
.card-horizontal.card-type-artist .card-image-hit-area, .card-horizontal.card-type-collection-artist .card-image-hit-area, .card-horizontal.card-type-user .card-image-hit-area {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.card-horizontal.card-type-artist .card-image,
|
||
.card-horizontal.card-type-artist .card-placeholder-wrapper,
|
||
.card-horizontal.card-type-artist .card-overlay, .card-horizontal.card-type-collection-artist .card-image,
|
||
.card-horizontal.card-type-collection-artist .card-placeholder-wrapper,
|
||
.card-horizontal.card-type-collection-artist .card-overlay, .card-horizontal.card-type-user .card-image,
|
||
.card-horizontal.card-type-user .card-placeholder-wrapper,
|
||
.card-horizontal.card-type-user .card-overlay {
|
||
width: auto;
|
||
height: auto;
|
||
top: 8px;
|
||
bottom: 8px;
|
||
}
|
||
.card-horizontal.card-type-artist .card-image, .card-horizontal.card-type-artist .card-placeholder-wrapper, .card-horizontal.card-type-artist .card-overlay, .card-horizontal.card-type-collection-artist .card-image, .card-horizontal.card-type-collection-artist .card-placeholder-wrapper, .card-horizontal.card-type-collection-artist .card-overlay, .card-horizontal.card-type-user .card-image, .card-horizontal.card-type-user .card-placeholder-wrapper, .card-horizontal.card-type-user .card-overlay {
|
||
right: 8px;
|
||
left: 8px;
|
||
}
|
||
|
||
|
||
.card-horizontal-size-small .card-image-wrapper {
|
||
flex: 0 0 50px;
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
.card-horizontal-size-small .card-info-wrapper {
|
||
height: 50px;
|
||
}
|
||
.card-horizontal-size-small .card-info-wrapper {
|
||
margin-left: 50px;
|
||
}
|
||
|
||
.card-horizontal-size-small .card-info-wrapper .card-info-content-wrapper {
|
||
height: 50px;
|
||
}
|
||
.card-horizontal-size-small .card-info-wrapper .card-info-content-wrapper {
|
||
padding-left: 12px;
|
||
padding-right: 12px;
|
||
}
|
||
|
||
.card-horizontal-size-small.card-type-artist .card-image,
|
||
.card-horizontal-size-small.card-type-artist .card-placeholder-wrapper,
|
||
.card-horizontal-size-small.card-type-artist .card-overlay, .card-horizontal-size-small.card-type-collection-artist .card-image,
|
||
.card-horizontal-size-small.card-type-collection-artist .card-placeholder-wrapper,
|
||
.card-horizontal-size-small.card-type-collection-artist .card-overlay, .card-horizontal-size-small.card-type-user .card-image,
|
||
.card-horizontal-size-small.card-type-user .card-placeholder-wrapper,
|
||
.card-horizontal-size-small.card-type-user .card-overlay {
|
||
top: 3px;
|
||
bottom: 3px;
|
||
}
|
||
.card-horizontal-size-small.card-type-artist .card-image, .card-horizontal-size-small.card-type-artist .card-placeholder-wrapper, .card-horizontal-size-small.card-type-artist .card-overlay, .card-horizontal-size-small.card-type-collection-artist .card-image, .card-horizontal-size-small.card-type-collection-artist .card-placeholder-wrapper, .card-horizontal-size-small.card-type-collection-artist .card-overlay, .card-horizontal-size-small.card-type-user .card-image, .card-horizontal-size-small.card-type-user .card-placeholder-wrapper, .card-horizontal-size-small.card-type-user .card-overlay {
|
||
right: 3px;
|
||
left: 3px;
|
||
}
|
||
|
||
.card-horizontal-size-small.card-video .card-image-wrapper {
|
||
width: 50px;
|
||
}
|
||
|
||
.card-horizontal-size-medium .card-button-play {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
width: 32px;
|
||
}
|
||
|
||
.card-horizontal-size-medium .card-button-play {
|
||
padding-top: 1px;
|
||
border-radius: 16px;
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
|
||
.card-horizontal-size-medium .card-button-play {
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
margin: -16px 0 0 -16px;
|
||
}
|
||
|
||
|
||
|
||
.card-horizontal-size-medium .card-button-play .b-alt-text {
|
||
margin-top: -30px;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
|
||
background-color: rgba(24, 24, 24, 0.7);
|
||
}
|
||
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active {
|
||
color: #b3b3b3;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active {
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-horizontal-size-medium .card-button-play {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.card-horizontal-size-medium .card-button-play::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.card-horizontal-size-medium .card-button-play::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-horizontal-size-medium .card-button-play::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.contextmenu-active::after, .card-horizontal-size-medium .card-button-play:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.contextmenu-active::after, .card-horizontal-size-medium .card-button-play:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-horizontal-size-medium .card-button-play.contextmenu-active::after, .card-horizontal-size-medium .card-button-play:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.contextmenu-active::after, .card-horizontal-size-medium .card-button-play:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.contextmenu-active::after, .card-horizontal-size-medium .card-button-play:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
}
|
||
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-horizontal-size-medium .card-button-play.contextmenu-active, .card-horizontal-size-medium .card-button-play:not(:disabled):hover {
|
||
transform: scale(1.0625);
|
||
}
|
||
}
|
||
.card-horizontal-size-medium .card-button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
text-align: left/* rtl:ignore */;
|
||
line-height: 32px;
|
||
font-size: 16px;
|
||
padding-left: 8px /* rtl:ignore */;
|
||
width: calc(100% - 8px);
|
||
}
|
||
.card-horizontal-size-medium .card-button-play::before {
|
||
border-radius: 500px;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.card-horizontal-size-medium .card-button-play.button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f132";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover), .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover), .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover)::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover)::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover)::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover).contextmenu-active, .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover).contextmenu-active::after, .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover).contextmenu-active, .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover).contextmenu-active::after, .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover)::before, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::before, .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.card-horizontal-size-medium .card-button-play.button-play.playing:hover::before, .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:hover::before, .card.playing .card-horizontal-size-medium .card-button-play.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover), .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after,
|
||
.card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::before,
|
||
.card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:hover::before,
|
||
.card.playing.card-horizontal-size-medium .card-button-play.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
|
||
.card-horizontal-size-medium .card-button-play::before {
|
||
content: "\f132";
|
||
}
|
||
.card-horizontal-size-medium .card-image-wrapper {
|
||
flex: 0 0 64px;
|
||
width: 64px;
|
||
height: 64px;
|
||
}
|
||
.card-horizontal-size-medium .card-info-wrapper {
|
||
height: 64px;
|
||
}
|
||
.card-horizontal-size-medium .card-info-wrapper {
|
||
margin-left: 64px;
|
||
}
|
||
|
||
.card-horizontal-size-medium .card-info-wrapper .card-info-content-wrapper {
|
||
height: 64px;
|
||
}
|
||
.card-horizontal-size-medium .card-info-wrapper .card-info-content-wrapper {
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
}
|
||
|
||
.card-horizontal-size-medium .card-info-subtitle-metadata {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.card-horizontal-size-medium.card-type-artist .card-image,
|
||
.card-horizontal-size-medium.card-type-artist .card-placeholder-wrapper,
|
||
.card-horizontal-size-medium.card-type-artist .card-overlay, .card-horizontal-size-medium.card-type-collection-artist .card-image,
|
||
.card-horizontal-size-medium.card-type-collection-artist .card-placeholder-wrapper,
|
||
.card-horizontal-size-medium.card-type-collection-artist .card-overlay, .card-horizontal-size-medium.card-type-user .card-image,
|
||
.card-horizontal-size-medium.card-type-user .card-placeholder-wrapper,
|
||
.card-horizontal-size-medium.card-type-user .card-overlay {
|
||
top: 5px;
|
||
bottom: 5px;
|
||
}
|
||
.card-horizontal-size-medium.card-type-artist .card-image, .card-horizontal-size-medium.card-type-artist .card-placeholder-wrapper, .card-horizontal-size-medium.card-type-artist .card-overlay, .card-horizontal-size-medium.card-type-collection-artist .card-image, .card-horizontal-size-medium.card-type-collection-artist .card-placeholder-wrapper, .card-horizontal-size-medium.card-type-collection-artist .card-overlay, .card-horizontal-size-medium.card-type-user .card-image, .card-horizontal-size-medium.card-type-user .card-placeholder-wrapper, .card-horizontal-size-medium.card-type-user .card-overlay {
|
||
right: 5px;
|
||
left: 5px;
|
||
}
|
||
|
||
.card-horizontal-size-medium.card-video .card-image-wrapper {
|
||
width: 64px;
|
||
}
|
||
|
||
.card-horizontal.card--with-remove-button .card-info-wrapper a {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.card-horizontal.card--with-remove-button .card-info-wrapper a .card-info-content-wrapper {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.card__remove-button {
|
||
display: none;
|
||
z-index: 2;
|
||
}
|
||
|
||
.card__remove-button {
|
||
margin-right: 4px;
|
||
}
|
||
|
||
|
||
|
||
.card-horizontal-interior-wrapper:hover .card__remove-button {
|
||
display: block;
|
||
}
|
||
|
||
/*******************************************************************************
|
||
* Card Puffs
|
||
*
|
||
* A link component that combines three images with a title and subtitle.
|
||
* It has a support for one custom wide image.
|
||
* Used in Browse and Hubs.
|
||
*
|
||
* Template: cards/puff.hbs
|
||
******************************************************************************/
|
||
.card-puff__image-wrapper {
|
||
overflow: hidden;
|
||
position: relative;
|
||
contain: paint;
|
||
}
|
||
|
||
.card-puff__image {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.card-puff__image {
|
||
background-size: cover;
|
||
background-position: 50% 50%;
|
||
}
|
||
|
||
.card-puff__image {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
|
||
.card-puff__images {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.card-puff__images {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
|
||
.card-puff__card-image {
|
||
position: absolute;
|
||
height: 100%;
|
||
}
|
||
|
||
.card-puff__card-image {
|
||
box-shadow: 5px 0 30px #000000;
|
||
}
|
||
|
||
|
||
.card-puff__card-image:nth-child(1) {
|
||
right: 0;
|
||
}
|
||
|
||
.card-puff__card-image:nth-child(3) {
|
||
left: 0;
|
||
}
|
||
|
||
|
||
.card-puff__info-container {
|
||
padding-top: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.card-puff__title-container {
|
||
position: absolute;
|
||
display: flex;
|
||
top: 0;
|
||
bottom: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.card-puff__title-container {
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
.card-puff__title-container {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
|
||
.card-puff__title {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow-wrap: break-word;
|
||
font-weight: var(--glue-font-weight-bold);
|
||
line-height: 1.6;
|
||
font-size: 2.5vw;
|
||
}
|
||
|
||
.card-puff__title {
|
||
margin: 0 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.card-puff__subtitle {
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: none;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
|
||
.card-puff.pressed {
|
||
transition: none;
|
||
}
|
||
.card-puff.pressed .card-puff__image-wrapper,
|
||
.card-puff.pressed .card-puff__info-container {
|
||
transition: none;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/**
|
||
* Aspect ration of puffs depends on the width of the client and in what
|
||
* grid size the puff is placed. Puffs are meant to be placed in a grid.
|
||
*
|
||
* There are two cases that we handle:
|
||
* - three puffs in a row (.col-sm-4, .col-md-4, etc)
|
||
* - two puffs in a row (.col-sm-6, .col-md-6, etc).
|
||
**/
|
||
.card-puff__image-wrapper {
|
||
padding-bottom: 40%;
|
||
}
|
||
|
||
.card-puff__card-image {
|
||
padding-right: 40%;
|
||
}
|
||
|
||
|
||
.card-puff__card-image:nth-child(2) {
|
||
left: 30%;
|
||
}
|
||
|
||
|
||
.col-xs-3 .card-puff__image-wrapper, .col-xs-4 .card-puff__image-wrapper, .col-xs-6 .card-puff__image-wrapper {
|
||
padding-bottom: 50%;
|
||
}
|
||
.col-xs-3 .card-puff__card-image, .col-xs-4 .card-puff__card-image, .col-xs-6 .card-puff__card-image {
|
||
padding-right: 50%;
|
||
}
|
||
|
||
.col-xs-3 .card-puff__card-image:nth-child(2), .col-xs-4 .card-puff__card-image:nth-child(2), .col-xs-6 .card-puff__card-image:nth-child(2) {
|
||
left: 25%;
|
||
}
|
||
|
||
|
||
.col-xs-6 .card-puff__title {
|
||
font-size: 3vw;
|
||
}
|
||
|
||
@media (min-width: 592px) {
|
||
.col-sm-6 .card-puff__image-wrapper {
|
||
padding-bottom: 40%;
|
||
}
|
||
.col-sm-6 .card-puff__card-image {
|
||
padding-right: 40%;
|
||
}
|
||
|
||
.col-sm-6 .card-puff__card-image:nth-child(2) {
|
||
left: 30%;
|
||
}
|
||
|
||
.col-sm-6 .card-puff__title {
|
||
font-size: 3vw;
|
||
}
|
||
}
|
||
@media (min-width: 820px) {
|
||
.col-md-3 .card-puff__image-wrapper, .col-md-4 .card-puff__image-wrapper {
|
||
padding-bottom: 40%;
|
||
}
|
||
.col-md-3 .card-puff__card-image, .col-md-4 .card-puff__card-image {
|
||
padding-right: 40%;
|
||
}
|
||
|
||
.col-md-3 .card-puff__card-image:nth-child(2), .col-md-4 .card-puff__card-image:nth-child(2) {
|
||
left: 30%;
|
||
}
|
||
|
||
|
||
.col-md-6 .card-puff__image-wrapper {
|
||
padding-bottom: 33.3333333333%;
|
||
}
|
||
.col-md-6 .card-puff__card-image {
|
||
padding-right: 33.3333333333%;
|
||
}
|
||
|
||
.col-md-6 .card-puff__card-image:nth-child(2) {
|
||
left: 33.3333333333%;
|
||
}
|
||
|
||
.col-md-6 .card-puff__title {
|
||
font-size: 2.5vw;
|
||
}
|
||
}
|
||
@media (min-width: 1280px) {
|
||
.col-lg-3 .card-puff__image-wrapper, .col-lg-4 .card-puff__image-wrapper, .col-lg-6 .card-puff__image-wrapper {
|
||
padding-bottom: 33.3333333333%;
|
||
}
|
||
.col-lg-3 .card-puff__card-image, .col-lg-4 .card-puff__card-image, .col-lg-6 .card-puff__card-image {
|
||
padding-right: 33.3333333333%;
|
||
}
|
||
|
||
.col-lg-3 .card-puff__card-image:nth-child(2), .col-lg-4 .card-puff__card-image:nth-child(2), .col-lg-6 .card-puff__card-image:nth-child(2) {
|
||
left: 33.3333333333%;
|
||
}
|
||
|
||
|
||
.col-lg-3 .card-puff__title,
|
||
.col-lg-4 .card-puff__title {
|
||
font-size: 2vw;
|
||
}
|
||
|
||
.col-lg-6 .card-puff__title {
|
||
font-size: 2.5vw;
|
||
}
|
||
}
|
||
@media (min-width: 1496px) {
|
||
.col-lg-3 .card-puff__title,
|
||
.col-lg-4 .card-puff__title {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.col-lg-6 .card-puff__title {
|
||
font-size: 36px;
|
||
}
|
||
}
|
||
.genre-card {
|
||
/* Needed because all links have hover/focus styles with a bottom border */
|
||
}
|
||
.genre-card {
|
||
border-bottom-color: transparent !important;
|
||
}
|
||
|
||
.gc-image-container {
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.gc-image {
|
||
height: 198px;
|
||
}
|
||
|
||
.gc-image {
|
||
background-size: cover;
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.gc-image-cols-1 {
|
||
height: auto;
|
||
}
|
||
|
||
.gc-image-cols-1 {
|
||
margin-top: 0px;
|
||
padding-bottom: 100%;
|
||
}
|
||
@media (min-width: 592px) {
|
||
.gc-image-cols-1 {
|
||
margin-top: 0px;
|
||
}
|
||
}
|
||
@media (min-width: 820px) {
|
||
.gc-image-cols-1 {
|
||
margin-top: 0px;
|
||
}
|
||
}
|
||
@media (min-width: 1280px) {
|
||
.gc-image-cols-1 {
|
||
margin-top: 0px;
|
||
}
|
||
}
|
||
|
||
.gc-image-cols-2 {
|
||
height: auto;
|
||
}
|
||
|
||
.gc-image-cols-2 {
|
||
margin-top: -8px;
|
||
padding-bottom: 50%;
|
||
}
|
||
@media (min-width: 592px) {
|
||
.gc-image-cols-2 {
|
||
margin-top: -8px;
|
||
}
|
||
}
|
||
@media (min-width: 820px) {
|
||
.gc-image-cols-2 {
|
||
margin-top: -10px;
|
||
}
|
||
}
|
||
@media (min-width: 1280px) {
|
||
.gc-image-cols-2 {
|
||
margin-top: -12px;
|
||
}
|
||
}
|
||
|
||
.gc-image-cols-3 {
|
||
height: auto;
|
||
}
|
||
|
||
.gc-image-cols-3 {
|
||
margin-top: -10.6666666667px;
|
||
padding-bottom: 33.3333333333%;
|
||
}
|
||
@media (min-width: 592px) {
|
||
.gc-image-cols-3 {
|
||
margin-top: -10.6666666667px;
|
||
}
|
||
}
|
||
@media (min-width: 820px) {
|
||
.gc-image-cols-3 {
|
||
margin-top: -13.3333333333px;
|
||
}
|
||
}
|
||
@media (min-width: 1280px) {
|
||
.gc-image-cols-3 {
|
||
margin-top: -16px;
|
||
}
|
||
}
|
||
|
||
.gc-image-cols-4 {
|
||
height: auto;
|
||
}
|
||
|
||
.gc-image-cols-4 {
|
||
margin-top: -12px;
|
||
padding-bottom: 25%;
|
||
}
|
||
@media (min-width: 592px) {
|
||
.gc-image-cols-4 {
|
||
margin-top: -12px;
|
||
}
|
||
}
|
||
@media (min-width: 820px) {
|
||
.gc-image-cols-4 {
|
||
margin-top: -15px;
|
||
}
|
||
}
|
||
@media (min-width: 1280px) {
|
||
.gc-image-cols-4 {
|
||
margin-top: -18px;
|
||
}
|
||
}
|
||
|
||
.gc-image-cols-5 {
|
||
height: auto;
|
||
}
|
||
|
||
.gc-image-cols-5 {
|
||
margin-top: -12.8px;
|
||
padding-bottom: 20%;
|
||
}
|
||
@media (min-width: 592px) {
|
||
.gc-image-cols-5 {
|
||
margin-top: -12.8px;
|
||
}
|
||
}
|
||
@media (min-width: 820px) {
|
||
.gc-image-cols-5 {
|
||
margin-top: -16px;
|
||
}
|
||
}
|
||
@media (min-width: 1280px) {
|
||
.gc-image-cols-5 {
|
||
margin-top: -19.2px;
|
||
}
|
||
}
|
||
|
||
.gc-image-cols-6 {
|
||
height: auto;
|
||
}
|
||
|
||
.gc-image-cols-6 {
|
||
margin-top: -13.3333333333px;
|
||
padding-bottom: 16.6666666667%;
|
||
}
|
||
@media (min-width: 592px) {
|
||
.gc-image-cols-6 {
|
||
margin-top: -13.3333333333px;
|
||
}
|
||
}
|
||
@media (min-width: 820px) {
|
||
.gc-image-cols-6 {
|
||
margin-top: -16.6666666667px;
|
||
}
|
||
}
|
||
@media (min-width: 1280px) {
|
||
.gc-image-cols-6 {
|
||
margin-top: -20px;
|
||
}
|
||
}
|
||
|
||
.gc-label-container {
|
||
position: absolute;
|
||
top: 50%;
|
||
bottom: 0%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
/* vertical centering */
|
||
/* horizontal centering */
|
||
max-width: 344px;
|
||
}
|
||
|
||
.gc-label-container {
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
padding: 16px;
|
||
}
|
||
|
||
.gc-label-container {
|
||
left: 0%;
|
||
right: 0%;
|
||
}
|
||
|
||
|
||
|
||
@media (min-width: 592px) {
|
||
.gc-label-container {
|
||
max-width: 560px;
|
||
}
|
||
.gc-label-container {
|
||
padding: 16px;
|
||
}
|
||
}
|
||
@media (min-width: 820px) {
|
||
.gc-label-container {
|
||
max-width: 780px;
|
||
}
|
||
.gc-label-container {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
@media (min-width: 1280px) {
|
||
.gc-label-container {
|
||
max-width: 1232px;
|
||
}
|
||
.gc-label-container {
|
||
padding: 24px;
|
||
}
|
||
}
|
||
.gc-label-text-wrapper {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.gc-label-text {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.gc-label-text {
|
||
border-bottom: 1px solid transparent;
|
||
}
|
||
|
||
.genre-card:hover .gc-label-text {
|
||
border-bottom-color: currentcolor;
|
||
}
|
||
|
||
.genre-card.pressed {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
/* stylelint-disable selector-max-type */
|
||
/* stylelint-disable max-nesting-depth */
|
||
/*******************************************************************************
|
||
* Component: page-header
|
||
*
|
||
* This is quite a complicated component. It has support for a lot of content
|
||
* (image, title, description, buttons etc) that can all be flipped on or off.
|
||
* There is also support for a background layer for a colored gradient or a
|
||
* background image, including animation logic tied to scrolling and triggered
|
||
* animations for a sticky header.
|
||
******************************************************************************/
|
||
/*******************************************************************************
|
||
* Private variables
|
||
******************************************************************************/
|
||
/*******************************************************************************
|
||
* Public block, elements and modifiers
|
||
******************************************************************************/
|
||
/**
|
||
* Public block class.
|
||
*
|
||
* 1. For positioning elements inside the header
|
||
*/
|
||
.glue-page-header {
|
||
position: relative;
|
||
min-height: 208px;
|
||
}
|
||
|
||
/**
|
||
* Public element class for a wrapper around the content element. This is used
|
||
* for layout and padding, while the content element is used for animations
|
||
* among other things.
|
||
*
|
||
* 1. Found weird rendering issues without this, where content inside of this
|
||
* element would be clipped in strange places when resizing the window.
|
||
*/
|
||
.glue-page-header__content-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
height: 100%;
|
||
min-height: 208px;
|
||
contain: paint;
|
||
/* [1] */
|
||
}
|
||
.glue-page-header__content-wrapper {
|
||
padding-top: 72px;
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
/**
|
||
* Public element class for the content element. This is used for animations
|
||
* among other things.
|
||
*/
|
||
.glue-page-header__content {
|
||
display: flex;
|
||
opacity: 1;
|
||
transition: opacity 166ms cubic-bezier(0.3, 0, 0, 1), transform 166ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.glue-page-header__content {
|
||
transform: translateY(0);
|
||
transition-delay: 166ms;
|
||
}
|
||
|
||
/**
|
||
* Public element class for an overlay that covers all the content.
|
||
* The purpose of this overlay is to cover the entire header with a solid
|
||
* background color while a video is playing in the header (for P2S). Because
|
||
* of the video implementation we have, the video is playing in zlink and is
|
||
* placed on top of the playlist iframe, causing the video to cover the scroll
|
||
* bar for the iframe. To solve that, we allocate space to the right of the
|
||
* video for the scroll bar, so the iframe shows through. However, the regular
|
||
* header image would then be visible in a small strip, so we need to put this
|
||
* cover element on top of the header to have a solid page background showing
|
||
* through in that small strip. This overlay is also for putting a background
|
||
* on top of the header for where there are black bars next to the video in
|
||
* some window sizes.
|
||
*/
|
||
.glue-page-header__content-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: none;
|
||
}
|
||
.glue-page-header__content-overlay {
|
||
background-color: #121212;
|
||
}
|
||
.glue-page-header__content-overlay {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.glue-page-header__content-overlay.glue-page-header__content-overlay--is-visible {
|
||
display: block;
|
||
}
|
||
|
||
/**
|
||
* Public element class for some of the content. Because of certain layout
|
||
* requirements, we need two sets of buttons in the regular header and we need
|
||
* this element to wrap all the content except the secondary set of buttons.
|
||
*/
|
||
.glue-page-header__content-inner {
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.glue-page-header__content-inner {
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
margin-top: -10px;
|
||
margin-bottom: -10px;
|
||
}
|
||
.glue-page-header__content-inner {
|
||
padding-left: 10px;
|
||
margin-left: -10px;
|
||
}
|
||
|
||
|
||
/**
|
||
* Public element class for an empty spacer. This is to leave some empty space
|
||
* in the right side of the header, so the title doesn't go all the way to the
|
||
* edge.
|
||
*/
|
||
.glue-page-header__spacer {
|
||
width: 10%;
|
||
}
|
||
|
||
/**
|
||
* Public modifier class for a larger empty spacer.
|
||
*/
|
||
.glue-page-header__spacer--large {
|
||
width: 25%;
|
||
}
|
||
@media (max-width: 1279px) {
|
||
.glue-page-header__spacer--large {
|
||
width: 15%;
|
||
}
|
||
}
|
||
@media (max-width: 819px) {
|
||
.glue-page-header__spacer--large {
|
||
width: 10%;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Public element class for the wrapper around the sticky header. This wrapper
|
||
* is there to keep the original position and size of the sticky header, so the
|
||
* scrolling logic can stick and unstick the header at the right position.
|
||
*/
|
||
.glue-page-header__sticky-wrapper {
|
||
position: absolute;
|
||
bottom: 0;
|
||
height: 68px;
|
||
width: 100vw;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/**
|
||
* Public element class for the sticky header. This is hidden by default and
|
||
* will be displayed when scrolling past the top edge of the sticky wrapper.
|
||
*/
|
||
.glue-page-header__sticky {
|
||
height: 68px;
|
||
overflow: hidden;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header__sticky {
|
||
padding-top: 48px;
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__image {
|
||
transition: 100ms cubic-bezier(1, 0, 0.7, 1) 0ms;
|
||
opacity: 0;
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__image {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(20px);
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__title {
|
||
transition: 100ms cubic-bezier(1, 0, 0.7, 1) 0ms;
|
||
opacity: 0;
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__title {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(20px);
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__p2s-details {
|
||
transition: 100ms cubic-bezier(1, 0, 0.7, 1) 0ms;
|
||
opacity: 0;
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__p2s-details {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(20px);
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__p2s-followers {
|
||
transition: 100ms cubic-bezier(1, 0, 0.7, 1) 0ms;
|
||
opacity: 0;
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__p2s-followers {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(20px);
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__button:nth-child(1) {
|
||
transition: 116ms cubic-bezier(1, 0, 0.7, 1) 0ms;
|
||
opacity: 0;
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__button:nth-child(1) {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(20px);
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__button:nth-child(2) {
|
||
transition: 132ms cubic-bezier(1, 0, 0.7, 1) 0ms;
|
||
opacity: 0;
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__button:nth-child(2) {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(20px);
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__button:nth-child(3) {
|
||
transition: 148ms cubic-bezier(1, 0, 0.7, 1) 0ms;
|
||
opacity: 0;
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__button:nth-child(3) {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(20px);
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__button:nth-child(4) {
|
||
transition: 164ms cubic-bezier(1, 0, 0.7, 1) 0ms;
|
||
opacity: 0;
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__button:nth-child(4) {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
/**
|
||
* Public element class for the sticky header content.
|
||
*/
|
||
.glue-page-header__sticky-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 68px;
|
||
transition: transform 0ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.glue-page-header__sticky-inner {
|
||
transform: translateY(68px);
|
||
transition-delay: 166ms;
|
||
}
|
||
|
||
/**
|
||
* Public element class for the wrapper around the navbar.
|
||
*/
|
||
.glue-page-header__navbar-wrapper {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/**
|
||
* Public element class for a wrapper around a group of buttons.
|
||
*/
|
||
.glue-page-header__buttons {
|
||
display: flex;
|
||
}
|
||
|
||
/**
|
||
* Public element class for a wrapper around the header background.
|
||
* This background positions itself fixed to the top of the viewport to enable
|
||
* certain scrolling behavior.
|
||
*/
|
||
.glue-page-header__background {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
overflow: hidden;
|
||
}
|
||
.glue-page-header__background {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
/**
|
||
* Public element class for a colored gradient header background.
|
||
* This has a default color, but a different color can be set using
|
||
* `background-color` from JS. There is also a gradient that darkens the color
|
||
* to have the header background blend into the page background.
|
||
*/
|
||
.glue-page-header__background-color {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.glue-page-header__background-color {
|
||
background-color: #606060;
|
||
background-image: linear-gradient(to bottom, transparent, #181818);
|
||
}
|
||
.glue-page-header__background-color {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
/**
|
||
* Public element class for a background image.
|
||
*/
|
||
.glue-page-header__background-image {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
will-change: transform;
|
||
contain: paint layout;
|
||
}
|
||
.glue-page-header__background-image {
|
||
background-size: cover;
|
||
background-position: center center;
|
||
}
|
||
.glue-page-header__background-image {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
/**
|
||
* Public element class for a background image loader. This is a wrapper element
|
||
* around the image, to allow for different transformations on the image and the
|
||
* loader element. The loader element uses an animation while the image element
|
||
* should follow scroll position precisely without animation.
|
||
*/
|
||
.glue-page-header__background-image-loader {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
opacity: 0;
|
||
will-change: transform;
|
||
}
|
||
.glue-page-header__background-image-loader {
|
||
transform: scale(1);
|
||
}
|
||
.glue-page-header__background-image-loader {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
/**
|
||
* Public element class for a background image overlay.
|
||
* This darkens the image a bit, so that we can still display content on top of
|
||
* it without having even bright colors blending in with the image.
|
||
*/
|
||
.glue-page-header__background-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
pointer-events: none;
|
||
}
|
||
.glue-page-header__background-overlay {
|
||
background: rgba(24, 24, 24, 0.44);
|
||
}
|
||
.glue-page-header__background-overlay {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
/**
|
||
* Public element class for a background image overlay with a gradient.
|
||
* This darkens the image even more in the bottom half part of the header, to
|
||
* have the header background blend into the page background.
|
||
*/
|
||
.glue-page-header__background-image-overlay-gradient {
|
||
position: absolute;
|
||
top: 50%;
|
||
bottom: -1px;
|
||
pointer-events: none;
|
||
}
|
||
.glue-page-header__background-image-overlay-gradient {
|
||
background: linear-gradient(to bottom, transparent, #181818);
|
||
}
|
||
.glue-page-header__background-image-overlay-gradient {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
/**
|
||
* Public element class for a background overlay that fades in while scrolling.
|
||
*/
|
||
.glue-page-header__background-scroll-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
opacity: 0;
|
||
will-change: opacity;
|
||
contain: paint layout;
|
||
pointer-events: none;
|
||
}
|
||
.glue-page-header__background-scroll-overlay {
|
||
background: #121212;
|
||
}
|
||
.glue-page-header__background-scroll-overlay {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
/**
|
||
* Public element class for a background overlay that fades in while scrolling,
|
||
* but with an elliptical shape to darken the edges faster than the center
|
||
* point of the header. Useful for headers with an image background. The actual
|
||
* ellipse is not specified here in CSS, since it's added from JS and the
|
||
* parameters for the ellipse change while scrolling.
|
||
*/
|
||
.glue-page-header__background-scroll-overlay-ellipse {
|
||
position: absolute;
|
||
top: -100px;
|
||
bottom: -100px;
|
||
opacity: 0;
|
||
will-change: opacity;
|
||
contain: paint layout;
|
||
pointer-events: none;
|
||
}
|
||
.glue-page-header__background-scroll-overlay-ellipse {
|
||
background-image: radial-gradient(circle farthest-corner, transparent, #121212 50%);
|
||
}
|
||
.glue-page-header__background-scroll-overlay-ellipse {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
/**
|
||
* Public element class for a background overlay that fades in while scrolling,
|
||
* that is placed behind the ellipse overlay. This will make sure the background
|
||
* ends up at a solid color, but still keeping the ellipse effect.
|
||
*/
|
||
.glue-page-header__background-scroll-overlay-ellipse-backdrop {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
opacity: 0;
|
||
will-change: opacity;
|
||
contain: paint layout;
|
||
pointer-events: none;
|
||
}
|
||
.glue-page-header__background-scroll-overlay-ellipse-backdrop {
|
||
background: #121212;
|
||
}
|
||
.glue-page-header__background-scroll-overlay-ellipse-backdrop {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
/**
|
||
* Public element class for a box showing the full description. In small windows
|
||
* the description might not always fit in the small space that is allocated for
|
||
* description, so JS logic will clone the description node and place it
|
||
* directly on top of the original description to get a simple overlay showing
|
||
* the full description when hovering a description that doesn't fit.
|
||
*
|
||
* 1. The coordinates will be set from JS to match up the position of the
|
||
* original description.
|
||
*/
|
||
.glue-page-header__full-description-overlay {
|
||
position: fixed;
|
||
/* [1] */
|
||
box-sizing: content-box;
|
||
}
|
||
.glue-page-header__full-description-overlay {
|
||
background-color: #282828;
|
||
box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.5);
|
||
border-radius: 8px;
|
||
padding: 8px 16px;
|
||
}
|
||
.glue-page-header__full-description-overlay {
|
||
transform: translate(-16px, -8px);
|
||
}
|
||
|
||
/**
|
||
* This element class is defined further up, but we need this here to nest
|
||
* other selectors inside of it, because the same content has different styles
|
||
* depending on if it's in the regular header or the sticky header.
|
||
* This is for the regular header.
|
||
*/
|
||
.glue-page-header__content {
|
||
/**
|
||
* Public element class for an image object.
|
||
*/
|
||
/**
|
||
* Public element class to wrap around the image and inherit its sizing
|
||
*/
|
||
/**
|
||
* Public element class for a wrapper around all the content except the image.
|
||
*/
|
||
/**
|
||
* Public element class for the label above the title. The label is used for
|
||
* displaying the type of entity the header represents.
|
||
*/
|
||
/**
|
||
* Public element class for the title.
|
||
*/
|
||
/**
|
||
* Public element class for the description.
|
||
*/
|
||
/**
|
||
* Public element class for the meta info bar. This is a one line bar of
|
||
* custom text content. For example, a playlist view might show the name of
|
||
* the owner and playlist length here.
|
||
*/
|
||
/**
|
||
* Public element class for the count label. This is the wrapper for both the
|
||
* text and the number. The count can be follower count, listener count etc.
|
||
*/
|
||
/**
|
||
* Public element class for the text in the count label.
|
||
*/
|
||
/**
|
||
* Public element class for the number in the count label.
|
||
*/
|
||
/**
|
||
* Public element class for the count label link.
|
||
*/
|
||
/**
|
||
* Public element class for the wrapper element for the buttons.
|
||
* This handles both sets of buttons in the regular header, but not buttons
|
||
* in the sticky header.
|
||
*/
|
||
}
|
||
.glue-page-header__content > .glue-page-header__buttons {
|
||
display: none;
|
||
}
|
||
.glue-page-header__content .glue-page-header__image {
|
||
flex: 0 0 auto;
|
||
width: 220px;
|
||
}
|
||
.glue-page-header__content .glue-page-header__image {
|
||
margin-right: 24px;
|
||
}
|
||
|
||
.glue-page-header__content .glue-page-header__image-inner {
|
||
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
|
||
}
|
||
.glue-page-header__content .glue-page-header__data {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
overflow: hidden;
|
||
}
|
||
.glue-page-header__content .glue-page-header__data {
|
||
padding-bottom: 10px;
|
||
margin-bottom: -10px;
|
||
}
|
||
.glue-page-header__content .glue-page-header__data {
|
||
padding-left: 10px;
|
||
margin-left: -10px;
|
||
}
|
||
|
||
.glue-page-header__content .glue-page-header__label {
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
line-height: 16px;
|
||
height: 22px;
|
||
color: #ffffff;
|
||
}
|
||
.glue-page-header__content .glue-page-header__label {
|
||
padding-top: 6px;
|
||
}
|
||
|
||
|
||
.glue-page-header__content .glue-page-header__title {
|
||
font-size: 48px;
|
||
line-height: 56px;
|
||
letter-spacing: -0.005em;
|
||
font-weight: var(--glue-font-weight-black);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 4;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
overflow-wrap: break-word;
|
||
}
|
||
.glue-page-header__content .glue-page-header__title {
|
||
margin: 0;
|
||
}
|
||
.glue-page-header__content .glue-page-header__title {
|
||
text-align: left;
|
||
margin-left: -0.07em;
|
||
}
|
||
|
||
|
||
.glue-page-header__content .glue-page-header__description {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow-wrap: break-word;
|
||
}
|
||
.glue-page-header__content .glue-page-header__description {
|
||
margin-top: 8px;
|
||
}
|
||
.glue-page-header__content .glue-page-header__meta-info {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.glue-page-header__content .glue-page-header__meta-info {
|
||
margin-top: 10px;
|
||
}
|
||
.glue-page-header__content .glue-page-header__count-label {
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
.glue-page-header__content .glue-page-header__count-label {
|
||
right: 0;
|
||
text-align: right;
|
||
}
|
||
|
||
.glue-page-header__content .glue-page-header__count-label-text {
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
}
|
||
|
||
|
||
.glue-page-header__content .glue-page-header__count-label-number {
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
}
|
||
|
||
|
||
.glue-page-header__content .glue-page-header__count-label-link {
|
||
border-bottom: 0;
|
||
}
|
||
.glue-page-header__content .glue-page-header__count-label-link:hover .glue-page-header__count-label-text {
|
||
color: #ffffff;
|
||
}
|
||
.glue-page-header__content .glue-page-header__count-label-link:hover .glue-page-header__count-label-text:active {
|
||
color: #d9d9d9;
|
||
}
|
||
.glue-page-header__content .glue-page-header__buttons > * {
|
||
margin-top: 20px;
|
||
}
|
||
.glue-page-header__content .glue-page-header__buttons > * {
|
||
margin-right: 12px;
|
||
}
|
||
|
||
@media (max-width: 819px) {
|
||
.glue-page-header__content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
/**
|
||
* Public element class for the title in narrow window.
|
||
*/
|
||
/**
|
||
* Public element class for the image in narrow window.
|
||
*/
|
||
/**
|
||
* Public element class for the count label in narrow window, where we hide
|
||
* it because of space constraints.
|
||
*/
|
||
}
|
||
.glue-page-header__content .glue-page-header__title {
|
||
font-size: 36px;
|
||
line-height: 44px;
|
||
letter-spacing: -0.005em;
|
||
font-weight: var(--glue-font-weight-black);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
}
|
||
|
||
.glue-page-header__content .glue-page-header__image {
|
||
width: 136px;
|
||
}
|
||
.glue-page-header__content .glue-page-header__image.glue-page-header__image--artist, .glue-page-header__content .glue-page-header__image.glue-page-header__image--user {
|
||
width: 120px;
|
||
}
|
||
.glue-page-header__content .glue-page-header__data .glue-page-header__buttons {
|
||
display: none;
|
||
}
|
||
.glue-page-header__content > .glue-page-header__buttons {
|
||
display: flex;
|
||
}
|
||
.glue-page-header__content .glue-page-header__count-label {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* This element class is defined further up, but we need this here to nest
|
||
* other selectors inside of it, because the same content has different styles
|
||
* depending on if it's in the regular header or the sticky header.
|
||
* This is for the sticky header.
|
||
*/
|
||
.glue-page-header__sticky {
|
||
/**
|
||
* Public element class for the image.
|
||
*/
|
||
/**
|
||
* Public element class for the title.
|
||
*/
|
||
/**
|
||
* Public element class for the wrapper element for the buttons.
|
||
*/
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__image {
|
||
width: 36px;
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__image {
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.glue-page-header__sticky .glue-page-header__title {
|
||
font-size: 28px;
|
||
line-height: 36px;
|
||
letter-spacing: -0.005em;
|
||
font-weight: var(--glue-font-weight-black);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
display: flex;
|
||
overflow: hidden;
|
||
flex: 1;
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__title {
|
||
margin: 0;
|
||
}
|
||
|
||
.glue-page-header__sticky .glue-page-header__title-text {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.glue-page-header__sticky .glue-page-header__buttons > * {
|
||
margin-left: 12px;
|
||
}
|
||
|
||
|
||
html:lang(th) .glue-page-header__sticky .glue-page-header__title {
|
||
line-height: 44px;
|
||
}
|
||
|
||
/**
|
||
* Public modifier classes for entity types that should have circular images.
|
||
*/
|
||
.glue-page-header--artist .glue-page-header__content .glue-page-header__image,
|
||
.glue-page-header--user .glue-page-header__content .glue-page-header__image {
|
||
width: 120px;
|
||
}
|
||
.glue-page-header--artist .glue-page-header__content .glue-page-header__image-inner, .glue-page-header--user .glue-page-header__content .glue-page-header__image-inner {
|
||
border-radius: 500px;
|
||
}
|
||
.glue-page-header--artist .glue-page-header__content .glue-page-header__data,
|
||
.glue-page-header--user .glue-page-header__content .glue-page-header__data {
|
||
justify-content: center;
|
||
}
|
||
|
||
/**
|
||
* Public modifier class for the station entity, which has a special image
|
||
* effect with ripples where the normal shadow doesn't look good.
|
||
*/
|
||
.glue-page-header--station .glue-page-header__image-inner {
|
||
box-shadow: none;
|
||
}
|
||
|
||
/**
|
||
* Public modifier class for Playlist2Shows entity pages, which has a very large
|
||
* header with more content in the sticky header than normally.
|
||
*/
|
||
.glue-page-header--playlist2shows .glue-page-header__background-image {
|
||
background-position: center top;
|
||
}
|
||
.glue-page-header--playlist2shows .glue-page-header__p2s-details {
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: none;
|
||
color: #ffffff;
|
||
}
|
||
.glue-page-header--playlist2shows .glue-page-header__p2s-details {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.glue-page-header--playlist2shows .glue-page-header__p2s-followers {
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
color: #ffffff;
|
||
}
|
||
.glue-page-header--playlist2shows .glue-page-header__p2s-followers {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
|
||
.glue-page-header--playlist2shows .glue-page-header__sticky-wrapper {
|
||
height: 180px;
|
||
}
|
||
.glue-page-header--playlist2shows .glue-page-header__sticky {
|
||
height: 180px;
|
||
}
|
||
.glue-page-header--playlist2shows .glue-page-header__sticky-inner {
|
||
height: 180px;
|
||
align-items: flex-end;
|
||
}
|
||
.glue-page-header--playlist2shows .glue-page-header__sticky-inner {
|
||
transform: translateY(180px);
|
||
padding-bottom: 28px;
|
||
}
|
||
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__image {
|
||
width: 234px;
|
||
height: 132px;
|
||
}
|
||
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__image {
|
||
margin: 0;
|
||
}
|
||
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__sticky-data {
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__title {
|
||
margin-bottom: 4px;
|
||
}
|
||
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__p2s-details {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow-wrap: break-word;
|
||
}
|
||
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__p2s-details {
|
||
margin-top: 0;
|
||
margin-bottom: 4px;
|
||
}
|
||
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__p2s-followers {
|
||
margin-top: 0;
|
||
margin-bottom: 16px;
|
||
}
|
||
.glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__buttons > * {
|
||
margin-left: 0;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
|
||
/**
|
||
* Public modifier class for a header with an active sticky header.
|
||
*/
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__background-scroll-overlay-ellipse {
|
||
background: #121212;
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__content {
|
||
opacity: 0;
|
||
transition: opacity 166ms cubic-bezier(1, 0, 0.7, 1), transform 166ms cubic-bezier(1, 0, 0.7, 1);
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__content {
|
||
transform: translateY(-20px);
|
||
transition-delay: 0ms;
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky {
|
||
pointer-events: auto;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__image {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 166ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__image {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__title {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 166ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__title {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-details {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 166ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-details {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-followers {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 166ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-followers {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(1) {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 199ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(1) {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(2) {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 232ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(2) {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(3) {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 265ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(3) {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(4) {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 298ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(4) {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky-inner {
|
||
transition: none;
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__sticky-inner {
|
||
transform: translateY(-48px);
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__background {
|
||
border-bottom: 1px solid #282828;
|
||
}
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__background {
|
||
right: -16px;
|
||
}
|
||
|
||
.glue-page-header--with-active-sticky-header .navbar.sticky-top {
|
||
background-color: transparent;
|
||
border-bottom: 0;
|
||
}
|
||
|
||
/**
|
||
* Public modifier class for a header that also includes a navbar. Since the
|
||
* navbar is inside the header, positions and sizes need to be adjusted.
|
||
*/
|
||
.glue-page-header--with-navbar .glue-page-header__content-wrapper {
|
||
height: calc(100% - 44px);
|
||
}
|
||
.glue-page-header--with-navbar .glue-page-header__sticky-wrapper {
|
||
bottom: 44px;
|
||
}
|
||
|
||
/**
|
||
* Public modifier class for a header that includes a count label.
|
||
*/
|
||
@media (max-width: 1279px) {
|
||
.glue-page-header--with-count-label .glue-page-header__spacer--large {
|
||
width: 22%;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Public modifier class for a header with responsive height, appropriate for
|
||
* a 16:9 video page. This is made for a header that gets replaced by a video
|
||
* player when playback starts.
|
||
*/
|
||
.glue-page-header--with-responsive-height-video {
|
||
height: calc((100vw / 1.7777777778) + 48px);
|
||
min-height: 328px;
|
||
max-height: calc( 100vh - ( 56px + 28px + (41px * 3) ) );
|
||
}
|
||
|
||
/**
|
||
* Public modifier class for a header with responsive height, small size.
|
||
* This is useful for a header that needs impact, but lacks a background image.
|
||
*/
|
||
.glue-page-header--with-responsive-height-small {
|
||
height: 18.1818181818vw;
|
||
min-height: 328px;
|
||
max-height: 40vh;
|
||
}
|
||
|
||
/**
|
||
* Public modifier class for a header with responsive height, large size.
|
||
* This is useful for a header that needs impact and has a background image.
|
||
*/
|
||
.glue-page-header--with-responsive-height-large {
|
||
height: 31.25vw;
|
||
min-height: 328px;
|
||
max-height: 40vh;
|
||
}
|
||
|
||
|
||
|
||
|
||
/**
|
||
* Public modifier class for a header with centered content. This should only
|
||
* be used in rare cases such as a video header where the header is very tall
|
||
* and bottom left alignment would look weird.
|
||
*/
|
||
.glue-page-header--with-centered-content .glue-page-header__content-wrapper {
|
||
justify-content: center;
|
||
}
|
||
.glue-page-header--with-centered-content .glue-page-header__data {
|
||
align-items: center;
|
||
}
|
||
.glue-page-header--with-centered-content .glue-page-header__data {
|
||
text-align: center;
|
||
}
|
||
@media (max-width: 819px) {
|
||
.glue-page-header--with-centered-content .glue-page-header__content > .glue-page-header__buttons {
|
||
display: none;
|
||
}
|
||
.glue-page-header--with-centered-content .glue-page-header__content-inner .glue-page-header__buttons {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Public modifier class for a header that is in a fast scrolling mode.
|
||
* When scrolling fast, most animations should be disabled to not cause a laggy
|
||
* effect of animations being slower than the scroll speed. We make an exception
|
||
* for the sticky header when it appears and items in the sticky header fade in
|
||
* since that doesn't feel laggy.
|
||
*/
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__image {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 0ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__image {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__title {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 0ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__title {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-details {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 0ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-details {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-followers {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 0ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__p2s-followers {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(1) {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 33ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(1) {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(2) {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 66ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(2) {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(3) {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 99ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(3) {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(4) {
|
||
transition: 266ms cubic-bezier(0.3, 0, 0, 1) 132ms;
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header--with-fast-scrolling.glue-page-header--with-active-sticky-header .glue-page-header__sticky .glue-page-header__button:nth-child(4) {
|
||
transition-property: transform, opacity;
|
||
transform: translateY(0);
|
||
}
|
||
.glue-page-header--with-fast-scrolling:not(.glue-page-header--with-active-sticky-header) .glue-page-header__image,
|
||
.glue-page-header--with-fast-scrolling:not(.glue-page-header--with-active-sticky-header) .glue-page-header__title,
|
||
.glue-page-header--with-fast-scrolling:not(.glue-page-header--with-active-sticky-header) .glue-page-header__button {
|
||
transition: none !important;
|
||
}
|
||
.glue-page-header--with-fast-scrolling .glue-page-header__content,
|
||
.glue-page-header--with-fast-scrolling .glue-page-header__sticky-inner,
|
||
.glue-page-header--with-fast-scrolling .glue-page-header__sponsorship {
|
||
transition: none !important;
|
||
}
|
||
|
||
/**
|
||
* Public modifier class for a header that should have all animations disabled.
|
||
* This can be needed in cases where the header is completely re-rendered with
|
||
* new DOM nodes, since that would otherwise trigger animations (it's rendered
|
||
* with initial state, then JS kicks in and updates sticky state etc which
|
||
* triggers animations). An example of this is when switching between playlists,
|
||
* where we want to just immediately switch to the next playlist without
|
||
* animations even when the remembered scroll position is far enough down to
|
||
* trigger sticky header.
|
||
*/
|
||
.glue-page-header--with-no-animations .glue-page-header__content,
|
||
.glue-page-header--with-no-animations .glue-page-header__sticky-inner,
|
||
.glue-page-header--with-no-animations .glue-page-header__image,
|
||
.glue-page-header--with-no-animations .glue-page-header__title,
|
||
.glue-page-header--with-no-animations .glue-page-header__button {
|
||
transition: none !important;
|
||
}
|
||
|
||
/**
|
||
* Public modifier classes for header content wrapper without a grid.
|
||
* This adds some padding to the left edge, so that content like buttons can
|
||
* extend slightly outside of the edge when needed. This is also for the title
|
||
* that is pushed slightly to the left to align better.
|
||
*/
|
||
.glue-page-header__content-wrapper--without-grid {
|
||
margin-left: -12px;
|
||
padding-left: 12px;
|
||
}
|
||
|
||
|
||
/**
|
||
* Public modifier classes for header content with a small image.
|
||
*/
|
||
.glue-page-header__content--with-custom-image-size .glue-page-header__image {
|
||
width: auto;
|
||
}
|
||
|
||
/**
|
||
* Public modifier class for an element around the content, where the buttons
|
||
* should always be placed to the far left, even when an image is displayed.
|
||
*/
|
||
.glue-page-header__content--with-button-placement-left {
|
||
flex-direction: column;
|
||
}
|
||
.glue-page-header__content--with-button-placement-left .glue-page-header__data .glue-page-header__buttons {
|
||
display: none;
|
||
}
|
||
.glue-page-header__content--with-button-placement-left > .glue-page-header__buttons {
|
||
display: flex;
|
||
}
|
||
|
||
/**
|
||
* Public modifier class for a background image that has just been loaded.
|
||
*/
|
||
.glue-page-header__background-image-loader--with-loading-animation {
|
||
transition: opacity 900ms cubic-bezier(0.3, 0, 0, 1), transform 900ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
|
||
/**
|
||
* Public modifier class for a background image that has been loaded.
|
||
*/
|
||
.glue-page-header__background-image-loader--is-loaded {
|
||
opacity: 1;
|
||
}
|
||
.glue-page-header__background-image-loader--is-loaded {
|
||
transform: scale(1.07);
|
||
}
|
||
|
||
/**
|
||
* Sponsored playlist class for company's logos that appear in the header.
|
||
*/
|
||
.glue-page-header--sponsored .glue-page-header__label,
|
||
.glue-page-header--sponsored .glue-page-header__title,
|
||
.glue-page-header--sponsored .glue-page-header__description,
|
||
.glue-page-header--sponsored .glue-page-header__meta-info {
|
||
opacity: 1;
|
||
transition: opacity 700ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.glue-page-header--sponsored .glue-page-header__spacer {
|
||
width: 150px;
|
||
}
|
||
.glue-page-header--sponsored .glue-page-header__content {
|
||
flex-grow: 1;
|
||
}
|
||
.glue-page-header--sponsored .glue-page-header__content .glue-page-header__data {
|
||
justify-content: center;
|
||
}
|
||
.glue-page-header--sponsored .glue-page-header__content .glue-page-header__data {
|
||
padding-bottom: 20px;
|
||
}
|
||
.glue-page-header--sponsored .glue-page-header__label {
|
||
height: auto;
|
||
}
|
||
.glue-page-header--sponsored .glue-page-header__background-image-overlay-gradient {
|
||
background: linear-gradient(to bottom, transparent, #181818 70%);
|
||
}
|
||
.glue-page-header--sponsored .glue-page-header--with-active-sticky-header .glue-page-header__sponsorship {
|
||
opacity: 0;
|
||
transition: opacity 166ms cubic-bezier(0.3, 0, 0, 1), transform 166ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.glue-page-header--sponsored .glue-page-header--with-active-sticky-header .glue-page-header__sponsorship {
|
||
transform: translateY(-20px);
|
||
transition-delay: 0ms;
|
||
}
|
||
.glue-page-header--sponsored .glue-page-header__sponsorship {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
transition: opacity 166ms cubic-bezier(0.3, 0, 0, 1), transform 166ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.glue-page-header--sponsored .glue-page-header__sponsorship {
|
||
transform: translateY(0);
|
||
transition-delay: 166ms;
|
||
margin-top: auto;
|
||
}
|
||
.glue-page-header--sponsored .glue-page-header__sponsorship .glue-page-header__label {
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
line-height: 16px;
|
||
height: 22px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
|
||
.glue-page-header--sponsored .glue-page-header__sponsorship .sponsored-logo {
|
||
position: static;
|
||
}
|
||
.glue-page-header--sponsored .sponsored-logo {
|
||
position: absolute;
|
||
top: 40px;
|
||
transition: top 0.7s;
|
||
}
|
||
.glue-page-header--sponsored .sponsored-logo {
|
||
right: 0;
|
||
}
|
||
|
||
.glue-page-header--sponsored .sponsored-logo a:hover, .glue-page-header--sponsored .sponsored-logo a:focus {
|
||
border-bottom: none;
|
||
}
|
||
.glue-page-header--sponsored .sponsored-logo img {
|
||
max-height: 75px;
|
||
max-width: 140px;
|
||
}
|
||
@media (max-height: 750px) {
|
||
.glue-page-header--sponsored .glue-page-header__background-image-overlay-gradient {
|
||
background: linear-gradient(to bottom, transparent, #181818 50%);
|
||
}
|
||
}
|
||
@media (max-width: 819px) {
|
||
.glue-page-header--sponsored .sponsored-logo {
|
||
top: 29px;
|
||
}
|
||
}
|
||
|
||
.glue-page-header__top-bar {
|
||
height: 104px;
|
||
position: fixed;
|
||
top: 0;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.glue-page-header__top-bar {
|
||
background: linear-gradient(#121212, #121212 48px, transparent);
|
||
}
|
||
|
||
.glue-page-header__top-bar {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
|
||
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__top-bar {
|
||
height: 48px;
|
||
}
|
||
|
||
.glue-page-header--with-active-sticky-header .glue-page-header__top-bar {
|
||
transition-property: height;
|
||
transition-duration: 0ms;
|
||
transition-delay: 166ms;
|
||
}
|
||
|
||
/**
|
||
* All of the code below is deprecated in favour of the new GLUE Header code.
|
||
* The code still exists here as it is still used by some areas of the codebase.
|
||
*/
|
||
.header {
|
||
position: relative;
|
||
}
|
||
.header {
|
||
background: #181818;
|
||
margin: 0 auto;
|
||
}
|
||
.header {
|
||
clear: left;
|
||
}
|
||
|
||
|
||
.h-main-content {
|
||
position: relative;
|
||
}
|
||
|
||
.h-main-content {
|
||
padding-top: 16px;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.h-media {
|
||
width: 210px;
|
||
}
|
||
|
||
.h-media {
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
.h-media {
|
||
float: left;
|
||
}
|
||
|
||
|
||
.h-media .card {
|
||
position: relative;
|
||
}
|
||
|
||
.h-data {
|
||
width: 100%;
|
||
}
|
||
|
||
.h-data {
|
||
float: left;
|
||
margin-left: -214px;
|
||
padding-left: 230px;
|
||
}
|
||
|
||
|
||
|
||
.h-label {
|
||
color: #b3b3b3;
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
}
|
||
|
||
|
||
|
||
.h-title {
|
||
font-size: 48px;
|
||
line-height: 56px;
|
||
letter-spacing: -0.005em;
|
||
font-weight: var(--glue-font-weight-black);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
position: relative;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.h-title {
|
||
margin: 0;
|
||
}
|
||
|
||
.h-title a {
|
||
color: #ffffff !important;
|
||
}
|
||
.h-title a {
|
||
border: none !important;
|
||
}
|
||
|
||
.h-description {
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.h-description {
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.h-controllers {
|
||
bottom: 16px;
|
||
position: absolute;
|
||
}
|
||
.h-controllers .button {
|
||
margin-right: 12px;
|
||
}
|
||
|
||
|
||
.h-search-bar {
|
||
line-height: 36px;
|
||
}
|
||
|
||
.h-search-bar {
|
||
border-top: 1px solid #282828;
|
||
margin: 0;
|
||
}
|
||
|
||
.h-search-field-outer-wrapper {
|
||
height: 56px;
|
||
}
|
||
|
||
.h-search-field-wrapper {
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
}
|
||
.h-search-field-wrapper.sticky-top {
|
||
position: fixed;
|
||
z-index: 1020;
|
||
/* spotify-events/sticky sets other values */
|
||
max-width: 1480px;
|
||
}
|
||
.h-search-field-wrapper.sticky-top {
|
||
background-color: #181818;
|
||
}
|
||
.h-search-field-wrapper.sticky-top {
|
||
left: 0 !important;
|
||
right: 0 !important;
|
||
padding-right: 32px;
|
||
padding-left: 32px;
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.h-search-field-wrapper.sticky-top::after {
|
||
content: "";
|
||
display: table;
|
||
}
|
||
.h-search-field-wrapper.sticky-top::after {
|
||
clear: both;
|
||
}
|
||
|
||
.h-search-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
line-height: 36px;
|
||
}
|
||
|
||
.h-search-wrapper::before {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.h-search-wrapper::before {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
|
||
|
||
.h-search-wrapper:hover::before {
|
||
color: #ffffff;
|
||
}
|
||
.h-search-wrapper:hover .h-search::placeholder {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.h-search {
|
||
width: 100%;
|
||
height: 36px;
|
||
color: #ffffff;
|
||
display: block;
|
||
outline: 0;
|
||
}
|
||
|
||
.h-search {
|
||
background: transparent;
|
||
border: 0;
|
||
border-radius: 3px;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.h-search {
|
||
padding-left: 36px;
|
||
padding-right: 36px;
|
||
}
|
||
|
||
|
||
.focus .h-search, .h-search:focus {
|
||
background: #404040;
|
||
}
|
||
|
||
.h-search-close {
|
||
bottom: 0;
|
||
display: none;
|
||
position: absolute;
|
||
top: 0;
|
||
width: 36px;
|
||
}
|
||
|
||
.h-search-close {
|
||
text-align: center;
|
||
}
|
||
|
||
.h-search-close {
|
||
right: 0;
|
||
}
|
||
|
||
|
||
.h-search-close:hover {
|
||
color: #ffffff;
|
||
}
|
||
.focus .h-search-close {
|
||
display: block;
|
||
}
|
||
|
||
.h-search-suggestions {
|
||
display: none;
|
||
position: absolute;
|
||
list-style: none;
|
||
max-height: 180px;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
width: 100%;
|
||
top: 100%;
|
||
}
|
||
|
||
.h-search-suggestions {
|
||
background: #282828;
|
||
border-radius: 3px;
|
||
padding: 0;
|
||
}
|
||
.focus .h-search-suggestions {
|
||
display: block;
|
||
}
|
||
|
||
.h-search-suggestion {
|
||
color: #b3b3b3;
|
||
}
|
||
|
||
.h-search-suggestion {
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.h-search-suggestion {
|
||
padding-left: 36px;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
|
||
.h-search-suggestion:hover {
|
||
color: #ffffff;
|
||
}
|
||
.h-search-suggestion:hover {
|
||
background: #333333;
|
||
}
|
||
|
||
.h-search-result {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.h-search-matches {
|
||
float: right;
|
||
padding-left: 10px;
|
||
}
|
||
|
||
|
||
|
||
.header-image {
|
||
min-height: 320px;
|
||
max-width: 1480px;
|
||
}
|
||
|
||
.header-image {
|
||
background-repeat: no-repeat;
|
||
background-position: 50% 0;
|
||
background-size: cover;
|
||
background-color: black;
|
||
border-bottom: 1px solid #282828;
|
||
}
|
||
.header-image::before {
|
||
bottom: 0;
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
.header-image::before {
|
||
background: rgba(0, 0, 0, 0.6);
|
||
}
|
||
.header-image::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.header-image .h-main-content {
|
||
height: 275px;
|
||
}
|
||
.header-image .nav {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.header-album .h-title {
|
||
text-overflow: clip;
|
||
white-space: normal;
|
||
}
|
||
.header-album .h-meta-info {
|
||
margin-bottom: 65px;
|
||
}
|
||
|
||
.glue-page-header .card-type-station:not(.card-type-station-cluster) .card-image,
|
||
.glue-page-header .card-type-station:not(.card-type-station-cluster) .card-placeholder-wrapper {
|
||
display: none;
|
||
}
|
||
.glue-page-header .card-type-station:not(.card-type-station-cluster) .card-station-mask {
|
||
background-image: url("https://local_resource_host/images/station-header-wave.svg");
|
||
}
|
||
.glue-page-header .card-type-station:not(.card-type-station-cluster) .card-station-overlay {
|
||
height: 50.46%;
|
||
top: 24.77%;
|
||
width: 50.46%;
|
||
}
|
||
.glue-page-header .card-type-station:not(.card-type-station-cluster) .card-station-overlay {
|
||
left: 24.77%;
|
||
}
|
||
|
||
.glue-page-header .card-type-station:not(.card-type-station-cluster).card-station-artist .card-station-overlay {
|
||
height: 59.52%;
|
||
top: 20.24%;
|
||
width: 59.52%;
|
||
}
|
||
.glue-page-header .card-type-station:not(.card-type-station-cluster).card-station-artist .card-station-overlay {
|
||
border-radius: 500px;
|
||
}
|
||
.glue-page-header .card-type-station:not(.card-type-station-cluster).card-station-artist .card-station-overlay {
|
||
left: 20.24%;
|
||
}
|
||
|
||
|
||
.header-inline .h-main-content {
|
||
padding: 0;
|
||
}
|
||
.header-inline .h-media {
|
||
width: 134px;
|
||
}
|
||
.header-inline .h-media {
|
||
padding: 0;
|
||
}
|
||
.header-inline .h-data {
|
||
padding-top: 0;
|
||
}
|
||
.header-inline .h-data {
|
||
margin-left: -134px;
|
||
padding-left: 150px;
|
||
}
|
||
|
||
.header-inline .h-controllers {
|
||
bottom: 0;
|
||
}
|
||
.header-inline .h-title {
|
||
font-size: 36px;
|
||
line-height: 44px;
|
||
letter-spacing: -0.005em;
|
||
font-weight: var(--glue-font-weight-black);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
max-height: inherit;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow-wrap: break-word;
|
||
}
|
||
.header-inline .h-title {
|
||
margin-bottom: 36px;
|
||
}
|
||
|
||
|
||
.fade-in {
|
||
animation: fadeIn 0.7s;
|
||
}
|
||
|
||
|
||
|
||
@keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@media (max-width: 819px) {
|
||
.h-extra {
|
||
display: none;
|
||
}
|
||
|
||
.h-title {
|
||
font-size: 36px;
|
||
line-height: 44px;
|
||
letter-spacing: -0.005em;
|
||
font-weight: var(--glue-font-weight-black);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
}
|
||
|
||
|
||
.h-media {
|
||
width: 130px;
|
||
}
|
||
|
||
.h-media {
|
||
padding-bottom: 60px;
|
||
}
|
||
|
||
.header-inline .h-title {
|
||
max-height: 88px;
|
||
}
|
||
|
||
.h-controllers {
|
||
left: 32px;
|
||
}
|
||
|
||
|
||
|
||
.header-small .h-controllers {
|
||
left: inherit;
|
||
}
|
||
|
||
|
||
|
||
.header-inline .h-controllers {
|
||
left: inherit;
|
||
}
|
||
|
||
|
||
}
|
||
.h-sticky-header {
|
||
bottom: 66px;
|
||
height: 0;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
width: 100%;
|
||
}
|
||
.h-sticky-header {
|
||
left: 0;
|
||
}
|
||
|
||
.h-sticky-header .h-sticky-header-inner {
|
||
overflow: hidden;
|
||
width: 100%;
|
||
z-index: 1020;
|
||
}
|
||
.h-sticky-header .h-sticky-header-inner {
|
||
background-color: #181818;
|
||
padding: 0;
|
||
}
|
||
.h-sticky-header .h-sticky-header-inner {
|
||
left: 0 !important;
|
||
right: 0 !important;
|
||
}
|
||
|
||
.h-sticky-header .h-sticky-header-inner.sticky-top {
|
||
position: fixed;
|
||
top: 0;
|
||
}
|
||
.h-sticky-header .h-sticky-container {
|
||
border-bottom: 1px solid #282828;
|
||
padding-bottom: 16px;
|
||
padding-top: 16px;
|
||
}
|
||
.h-sticky-header .h-sticky-container > * {
|
||
height: 36px;
|
||
}
|
||
.h-sticky-header .h-sticky-image {
|
||
height: 36px;
|
||
position: relative;
|
||
width: 36px;
|
||
}
|
||
.h-sticky-header .h-sticky-image {
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
.h-sticky-header .h-sticky-image {
|
||
float: left;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.h-sticky-header .h-sticky-image .card-image {
|
||
bottom: 0;
|
||
top: 0;
|
||
}
|
||
.h-sticky-header .h-sticky-image .card-image {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.h-sticky-header .h-sticky-controllers {
|
||
float: right;
|
||
margin-left: 15px;
|
||
}
|
||
|
||
.h-sticky-header .h-sticky-controllers .button:not(:first-child) {
|
||
margin-left: 12px;
|
||
}
|
||
|
||
.h-sticky-header .h-sticky-title {
|
||
color: #ffffff;
|
||
font-size: 28px;
|
||
line-height: 36px;
|
||
letter-spacing: -0.005em;
|
||
font-weight: var(--glue-font-weight-black);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
line-height: 36px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.h-sticky-header .h-sticky-title {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.h-sticky-header .h-sticky-controllers::before,
|
||
.h-sticky-header .h-sticky-title::before {
|
||
content: "";
|
||
display: inline-block;
|
||
height: 100%;
|
||
vertical-align: middle;
|
||
width: 0;
|
||
}
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
/**
|
||
* Tracklists
|
||
*
|
||
* Lists of tracks for different purposes, customization is not possible.
|
||
* Every tracklist has a unique set of columns and properties.
|
||
*
|
||
* Styleguide 90.1
|
||
*/
|
||
/* stylelint-disable selector-max-type */
|
||
/**
|
||
* Tables
|
||
*
|
||
* For basic styling—light padding and only horizontal dividers—add the base class
|
||
* <code>.table</code> to any <code><table></code>. It may seem super redundant,
|
||
* but given the widespread use of tables for other plugins like calendars and date
|
||
* pickers, we've opted to isolate our custom table styles.
|
||
*
|
||
* Template: tables
|
||
*
|
||
* Styleguide 30.6
|
||
*/
|
||
table {
|
||
max-width: 100%;
|
||
}
|
||
|
||
th {
|
||
font-weight: var(--glue-font-weight-bold);
|
||
}
|
||
|
||
th {
|
||
text-align: left;
|
||
}
|
||
|
||
|
||
|
||
.table {
|
||
width: 100%;
|
||
}
|
||
.table th,
|
||
.table td {
|
||
position: relative;
|
||
line-height: 20px;
|
||
vertical-align: top;
|
||
}
|
||
.table th, .table td {
|
||
padding: 8px;
|
||
border-top: 1px solid #282828;
|
||
}
|
||
.table tbody > tr:last-child > td {
|
||
border-bottom: 1px solid #282828;
|
||
}
|
||
.table thead th {
|
||
border-top: 0;
|
||
}
|
||
.table thead th {
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
/**
|
||
* Chart list
|
||
*
|
||
* Used on chart view
|
||
*
|
||
* Template: $tracklist-chart
|
||
* Data: demo-chart
|
||
*
|
||
* Styleguide 90.8
|
||
*/
|
||
.trend-mark.trend-new::before {
|
||
content: " ";
|
||
display: block;
|
||
height: 10px;
|
||
width: 10px;
|
||
}
|
||
.trend-mark.trend-new::before {
|
||
background-color: #2e77d0;
|
||
border-radius: 10px;
|
||
margin: 0 auto;
|
||
}
|
||
.trend-mark.trend-equal::before {
|
||
content: " ";
|
||
display: block;
|
||
height: 2px;
|
||
width: 8px;
|
||
}
|
||
.trend-mark.trend-equal::before {
|
||
background-color: #404040;
|
||
margin: 0 auto;
|
||
}
|
||
.trend-mark.trend-up {
|
||
color: #1ed760;
|
||
}
|
||
.trend-mark.trend-down {
|
||
color: #cd1a2b;
|
||
}
|
||
|
||
/*
|
||
* Playlist & Collection
|
||
*
|
||
* Shared list for playlist and collection.
|
||
*
|
||
* Template: $tracklist-playlist
|
||
* Data: demo-playlist
|
||
*
|
||
* Styleguide 90.4
|
||
*/
|
||
@media screen and (max-width: 1200px) {
|
||
.tracklist-playlist.narrow .tl-added-by {
|
||
display: none;
|
||
}
|
||
}
|
||
@media screen and (max-width: 900px) {
|
||
.tracklist-playlist.narrow .tl-date-added {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 950px) {
|
||
.tracklist-playlist .tl-time {
|
||
display: none;
|
||
}
|
||
}
|
||
@media screen and (max-width: 850px) {
|
||
.tracklist-playlist .tl-albums {
|
||
display: none;
|
||
}
|
||
}
|
||
@media screen and (max-width: 720px) {
|
||
.tracklist-playlist .tl-added-by {
|
||
display: none;
|
||
}
|
||
}
|
||
@media screen and (max-width: 680px) {
|
||
.tracklist-playlist .tl-date-added {
|
||
display: none;
|
||
}
|
||
}
|
||
.tracklist-playlist.tracklist-playlist--with-feedback .tl-local {
|
||
display: none;
|
||
}
|
||
@media screen and (max-width: 750px) {
|
||
.tracklist-playlist.tracklist-playlist--with-feedback .tl-date-added {
|
||
display: none;
|
||
}
|
||
.tracklist-playlist.tracklist-playlist--with-feedback th.tl-name {
|
||
width: 120px;
|
||
}
|
||
}
|
||
@media screen and (max-width: 600px) {
|
||
.tracklist-playlist.tracklist-playlist--with-feedback th.tl-name {
|
||
width: 70px;
|
||
}
|
||
}
|
||
@keyframes loopArtists-ltr {
|
||
from {
|
||
transform: translateX(0);
|
||
}
|
||
to {
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
@keyframes loopArtists-rtl {
|
||
from {
|
||
transform: translateX(0);
|
||
}
|
||
to {
|
||
transform: translateX(100%);
|
||
}
|
||
}
|
||
.tracklist-playlist .tl-artists__episode__wrapper {
|
||
display: grid;
|
||
}
|
||
.tracklist-playlist tr:not(.current) .tl-artists__episode--collapsed {
|
||
color: #ffffff;
|
||
}
|
||
.tracklist-playlist .tl-artists__episode {
|
||
display: none;
|
||
}
|
||
.tracklist-playlist .tl-artists__episode__wrapper:hover .tl-artists__episode {
|
||
display: block;
|
||
}
|
||
.tracklist-playlist .tl-artists__episode__wrapper:hover .tl-artists__episode--collapsed {
|
||
display: none;
|
||
}
|
||
.tracklist-playlist .tl-artists__episode:hover {
|
||
animation-duration: calc(var(--artistCount) * 1.5s);
|
||
animation-timing-function: ease-in;
|
||
animation-name: loopArtists-ltr ;
|
||
animation-iteration-count: infinite;
|
||
}
|
||
|
||
|
||
/*
|
||
* Podcast
|
||
*
|
||
* Used on Show entity page
|
||
*
|
||
* Template: $tracklist-podcast
|
||
*/
|
||
.tracklist-podcast .tl-progress {
|
||
width: 125px;
|
||
}
|
||
.tracklist-podcast .tl-progress .row-progress {
|
||
overflow: hidden;
|
||
width: 100px;
|
||
height: 4px;
|
||
}
|
||
.tracklist-podcast .tl-progress .row-progress {
|
||
border-radius: 2px;
|
||
background-color: #404040;
|
||
}
|
||
.tracklist-podcast .tl-progress .row-progress__bar {
|
||
--progress: 0;
|
||
/* [1] */
|
||
width: calc(var(--progress) * 100%);
|
||
height: 4px;
|
||
}
|
||
.tracklist-podcast .tl-progress .row-progress__bar {
|
||
background-color: #2e77d0;
|
||
}
|
||
.tracklist-podcast .tl-time {
|
||
width: 80px;
|
||
}
|
||
.tracklist-podcast .tl-cell {
|
||
vertical-align: top;
|
||
}
|
||
.tracklist-podcast .tl-cell__fixed-height {
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.tracklist-podcast .tl-status-indicator {
|
||
flex: 0 0 10px;
|
||
}
|
||
.tracklist-podcast .tl-status-indicator {
|
||
margin-right: 7px;
|
||
}
|
||
|
||
.tracklist-podcast .tl-time {
|
||
width: 85px;
|
||
}
|
||
.tracklist-podcast .tl-time .tl-cell__fixed-height {
|
||
justify-content: flex-end;
|
||
}
|
||
.tracklist-podcast .tl-name__title {
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
.tracklist-podcast .tl-name__description {
|
||
white-space: normal;
|
||
color: #b3b3b3;
|
||
}
|
||
.tracklist-podcast .tl-name__description {
|
||
margin-bottom: 16px;
|
||
}
|
||
.tracklist-podcast .tl-name__description {
|
||
padding-right: 16px;
|
||
}
|
||
|
||
.tracklist-podcast .tl-name__description__artists {
|
||
white-space: normal;
|
||
color: #ffffff;
|
||
display: grid;
|
||
grid-gap: 8px;
|
||
grid-auto-flow: column;
|
||
justify-content: start;
|
||
}
|
||
.tracklist-podcast .tl-name__description__artists {
|
||
margin-bottom: 8px;
|
||
}
|
||
.tracklist-podcast .tl-name__description__artists {
|
||
padding-right: 16px;
|
||
}
|
||
|
||
.tracklist-podcast .tl-name__description__artists__icon::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f134";
|
||
font-size: 16px;
|
||
line-height: inherit;
|
||
}
|
||
.tracklist-podcast .tl-name__description__artists--clamped {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
overflow-wrap: break-word;
|
||
}
|
||
.tracklist-podcast .tl-name__description--clamped {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow-wrap: break-word;
|
||
}
|
||
.tracklist-podcast .tl-name__description--scrollable {
|
||
overflow-y: auto;
|
||
max-height: 160px;
|
||
}
|
||
|
||
.tl-row.unavailable .tl-name__description {
|
||
color: #404040;
|
||
}
|
||
|
||
/*
|
||
* Search
|
||
*
|
||
* Search views.
|
||
*
|
||
* Template: $tracklist-search
|
||
* Data: demo-search-results
|
||
*
|
||
* Styleguide 90.5
|
||
*/
|
||
@media screen and (max-width: 850px) {
|
||
.tracklist-search .tl-albums {
|
||
display: none;
|
||
}
|
||
}
|
||
@media screen and (max-width: 800px) {
|
||
.tracklist-search .tl-popularity {
|
||
display: none;
|
||
}
|
||
.tracklist-search .tl-time {
|
||
padding-right: 12px;
|
||
}
|
||
|
||
}
|
||
|
||
/*
|
||
* Station track list
|
||
*
|
||
* Track list for station view.
|
||
*
|
||
* Template: $tracklist-station
|
||
* Data: demo-station
|
||
*
|
||
* Styleguide 90.4
|
||
*/
|
||
.tracklist-station-footer-visible {
|
||
opacity: 1;
|
||
}
|
||
.tracklist-station-footer-visible {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.tracklist-station-footer-visible-animate {
|
||
opacity: 1;
|
||
transition: none 0.5s cubic-bezier(0.3, 0, 0.4, 1);
|
||
}
|
||
|
||
.tracklist-station-footer-visible-animate {
|
||
padding-top: 0;
|
||
transition-property: opacity, padding-top;
|
||
}
|
||
|
||
.tracklist-station-footer-hidden-position {
|
||
opacity: 0;
|
||
}
|
||
|
||
.tracklist-station-footer-hidden-position {
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.tracklist-station-footer-hide-animate {
|
||
opacity: 0;
|
||
transition: none 0.125s cubic-bezier(0.3, 0, 0.4, 1);
|
||
}
|
||
|
||
.tracklist-station-footer-hide-animate {
|
||
transition-property: opacity;
|
||
}
|
||
|
||
.tracklist-station-container::after {
|
||
display: block;
|
||
position: relative;
|
||
height: 250px;
|
||
width: 100%;
|
||
content: "";
|
||
pointer-events: none;
|
||
}
|
||
|
||
.tracklist-station-container::after {
|
||
margin-top: -250px;
|
||
background: linear-gradient(rgba(24, 24, 24, 0), #181818);
|
||
}
|
||
|
||
@media screen and (max-width: 850px) {
|
||
.tracklist-station .tl-albums {
|
||
display: none;
|
||
}
|
||
}
|
||
@media screen and (max-width: 600px) {
|
||
.tracklist-station th.tl-name {
|
||
width: 70px;
|
||
}
|
||
}
|
||
|
||
.tracklist-station-footer-text {
|
||
display: block;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.tracklist-station-footer-text {
|
||
text-align: center;
|
||
}
|
||
|
||
.tracklist-station-footer-container {
|
||
height: 40px;
|
||
}
|
||
|
||
.tracklist-album,
|
||
.tracklist-chart,
|
||
.tracklist-basic,
|
||
.tracklist-playlist,
|
||
.tracklist-podcast,
|
||
.tracklist-popular,
|
||
.tracklist-station,
|
||
.tracklist-queue,
|
||
.tracklist-search {
|
||
color: #b3b3b3;
|
||
table-layout: fixed;
|
||
width: 100%;
|
||
}
|
||
|
||
.tracklist-album, .tracklist-chart, .tracklist-basic, .tracklist-playlist, .tracklist-podcast, .tracklist-popular, .tracklist-station, .tracklist-queue, .tracklist-search {
|
||
border-bottom: 1px solid #282828;
|
||
}
|
||
|
||
.tl-header th,
|
||
.tl-cell {
|
||
position: relative;
|
||
}
|
||
|
||
.tl-header th, .tl-cell {
|
||
border-top: 1px solid #282828;
|
||
}
|
||
|
||
.tl-header th, .tl-cell {
|
||
padding: 0 0 0 12px;
|
||
}
|
||
|
||
|
||
|
||
.tl-header th {
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
letter-spacing: 0.015em;
|
||
font-weight: var(--glue-font-weight-normal);
|
||
color: #b3b3b3;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
line-height: 28px;
|
||
text-transform: uppercase;
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
.tl-header th {
|
||
border-top: 0;
|
||
cursor: default;
|
||
}
|
||
|
||
|
||
|
||
.tl-header .tl-time {
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
.tl-header .tl-time::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f152";
|
||
font-size: 16px;
|
||
line-height: inherit;
|
||
}
|
||
.tl-header .tl-popularity {
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
text-align: center;
|
||
}
|
||
.tl-header .tl-popularity::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f150";
|
||
font-size: 16px;
|
||
line-height: inherit;
|
||
}
|
||
.tl-header .tl-date-added, .tl-header .tl-time-sent {
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
.tl-header .tl-date-added::before,
|
||
.tl-header .tl-time-sent::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f198";
|
||
font-size: 16px;
|
||
line-height: inherit;
|
||
}
|
||
|
||
.tl-header-hidden {
|
||
display: none;
|
||
}
|
||
|
||
.tl-header th:last-child {
|
||
padding-right: 12px;
|
||
}
|
||
|
||
|
||
|
||
.sticky-clone .tl-header {
|
||
background: #181818;
|
||
}
|
||
|
||
.tl-cell {
|
||
height: 40px;
|
||
}
|
||
|
||
.tl-cell:last-child {
|
||
padding-right: 12px;
|
||
}
|
||
|
||
|
||
|
||
.tl-cell,
|
||
.tl-cell > div {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tl-name .tl-highlight {
|
||
display: flex;
|
||
}
|
||
|
||
.tl-filter-highlight {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.tl-filter-highlight {
|
||
background-color: #2e77d0;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.tl-name__title {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tl-albums, .tl-artists, .tl-name-with-featured {
|
||
text-align: left;
|
||
}
|
||
|
||
|
||
|
||
.tl-save {
|
||
overflow: visible;
|
||
}
|
||
|
||
.tl-row:focus {
|
||
outline: 0;
|
||
}
|
||
|
||
.tl-number,
|
||
.tl-empty,
|
||
.tl-play {
|
||
width: 40px;
|
||
}
|
||
|
||
.tl-local {
|
||
width: 40px;
|
||
}
|
||
|
||
.tl-image {
|
||
width: 40px;
|
||
}
|
||
|
||
.tl-image {
|
||
padding: 0;
|
||
}
|
||
.tl-image img {
|
||
display: block;
|
||
max-width: none;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
.tl-image img {
|
||
left: 0;
|
||
}
|
||
|
||
|
||
.tl-time {
|
||
text-align: right/* rtl:ignore */;
|
||
width: 70px;
|
||
padding-left: 0 /* rtl:ignore */;
|
||
}
|
||
|
||
.tl-listen-count {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
text-align: right/* rtl:ignore */;
|
||
width: 130px;
|
||
}
|
||
|
||
.tl-date-added {
|
||
width: 110px;
|
||
}
|
||
|
||
.tl-time-sent {
|
||
width: 120px;
|
||
}
|
||
|
||
.tl-popularity {
|
||
width: 54px;
|
||
}
|
||
|
||
.tl-popularity[data-sort] {
|
||
width: 70px;
|
||
}
|
||
|
||
.tl-explicit {
|
||
width: 6.7em;
|
||
}
|
||
|
||
.tl-premium {
|
||
width: 7.2em;
|
||
}
|
||
|
||
.tl-more,
|
||
.tl-save,
|
||
.tl-trend {
|
||
width: 40px;
|
||
}
|
||
|
||
.tl-more, .tl-save, .tl-trend {
|
||
padding: 0;
|
||
}
|
||
|
||
.tl-trend {
|
||
text-align: center;
|
||
}
|
||
|
||
.tl-message {
|
||
text-align: center;
|
||
}
|
||
|
||
.tl-row .button-play {
|
||
display: none;
|
||
height: 28px;
|
||
line-height: 26px;
|
||
color: #ffffff;
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
width: 28px;
|
||
}
|
||
|
||
.tl-row .button-play {
|
||
padding-top: 1px;
|
||
border-radius: 14px;
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
|
||
.tl-row .button-play {
|
||
margin-left: -4px;
|
||
padding-left: 28px;
|
||
padding-right: 28px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
|
||
|
||
.tl-row .button-play .b-alt-text {
|
||
margin-top: -26px;
|
||
}
|
||
.tl-row .button-play.contextmenu-active, .tl-row .button-play:not(:disabled):hover {
|
||
background-color: rgba(24, 24, 24, 0.7);
|
||
}
|
||
.tl-row .button-play:not(:disabled):hover:active {
|
||
color: #b3b3b3;
|
||
}
|
||
.tl-row .button-play:not(:disabled):hover:active {
|
||
background: rgba(24, 24, 24, 0.7);
|
||
transform: scale(1);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row .button-play:not(:disabled):hover:active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row .button-play {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.tl-row .button-play::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
|
||
}
|
||
.tl-row .button-play::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row .button-play::after {
|
||
transition-duration: 50ms;
|
||
}
|
||
}
|
||
.tl-row .button-play.contextmenu-active, .tl-row .button-play:not(:disabled):hover {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.tl-row .button-play.contextmenu-active, .tl-row .button-play:not(:disabled):hover {
|
||
transition-property: transform, box-shadow, color, background-color;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row .button-play.contextmenu-active, .tl-row .button-play:not(:disabled):hover {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.tl-row .button-play.contextmenu-active::after, .tl-row .button-play:not(:disabled):hover::after {
|
||
transition: none 33ms cubic-bezier(0.3, 0, 0, 1);
|
||
}
|
||
.tl-row .button-play.contextmenu-active::after, .tl-row .button-play:not(:disabled):hover::after {
|
||
transition-property: box-shadow;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row .button-play.contextmenu-active::after, .tl-row .button-play:not(:disabled):hover::after {
|
||
transition-duration: 66ms;
|
||
}
|
||
}
|
||
.tl-row .button-play:not(:disabled):hover:active {
|
||
transition: none;
|
||
}
|
||
.tl-row .button-play:not(:disabled):hover:active::after {
|
||
transition: none;
|
||
}
|
||
.tl-row .button-play::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row .button-play::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||
}
|
||
.tl-row .button-play::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row .button-play.contextmenu-active, .tl-row .button-play:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row .button-play.contextmenu-active::after, .tl-row .button-play:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row .button-play.contextmenu-active, .tl-row .button-play:not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
.tl-row .button-play.contextmenu-active::after, .tl-row .button-play:not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px #ffffff;
|
||
}
|
||
}
|
||
.tl-row .button-play:not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.tl-row .button-play:not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px #535353;
|
||
}
|
||
.tl-row .button-play.contextmenu-active, .tl-row .button-play:not(:disabled):hover {
|
||
transform: scale(1.0714285714);
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row .button-play.contextmenu-active, .tl-row .button-play:not(:disabled):hover {
|
||
transform: scale(1.0714285714);
|
||
}
|
||
}
|
||
.tl-row .button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
text-align: left/* rtl:ignore */;
|
||
line-height: 28px;
|
||
font-size: 14px;
|
||
padding-left: 7px /* rtl:ignore */;
|
||
width: calc(100% - 7px);
|
||
}
|
||
.tl-row .button-play::before {
|
||
border-radius: 500px;
|
||
}
|
||
.tl-row .button-play::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.tl-row .button-play.button-play::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f132";
|
||
font-size: 14px;
|
||
line-height: 28px;
|
||
}
|
||
.tl-row .button-play.button-play.playing:not(:hover), .tl-row.playing .tl-row .button-play.button-play:not(:hover), .card.playing .tl-row .button-play.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row .button-play.button-play.playing:not(:hover)::after, .tl-row.playing .tl-row .button-play.button-play:not(:hover)::after, .card.playing .tl-row .button-play.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row .button-play.button-play.playing:not(:hover)::after, .tl-row.playing .tl-row .button-play.button-play:not(:hover)::after, .card.playing .tl-row .button-play.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row .button-play.button-play.playing:not(:hover)::after, .tl-row.playing .tl-row .button-play.button-play:not(:hover)::after, .card.playing .tl-row .button-play.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row .button-play.button-play.playing:not(:hover).contextmenu-active, .tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover, .card.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active, .card.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row .button-play.button-play.playing:not(:hover).contextmenu-active::after, .tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active::after, .card.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row .button-play.button-play.playing:not(:hover).contextmenu-active, .tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover, .tl-row.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover, .card.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active, .card.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row .button-play.button-play.playing:not(:hover).contextmenu-active::after, .tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover::after, .tl-row.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active::after, .card.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover:active, .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active, .card.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover:active::after, .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row .button-play.button-play.playing:not(:hover)::before, .tl-row.playing .tl-row .button-play.button-play:not(:hover)::before, .card.playing .tl-row .button-play.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 14px;
|
||
line-height: 28px;
|
||
}
|
||
.tl-row .button-play.button-play.playing:hover::before, .tl-row.playing .tl-row .button-play.button-play:hover::before, .card.playing .tl-row .button-play.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 14px;
|
||
line-height: 28px;
|
||
}
|
||
.tl-row.playing.tl-row .button-play.button-play:not(:hover), .card.playing.tl-row .button-play.button-play:not(:hover) {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.tl-row .button-play.button-play:not(:hover)::after,
|
||
.card.playing.tl-row .button-play.button-play:not(:hover)::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.tl-row.playing.tl-row .button-play.button-play:not(:hover)::after, .card.playing.tl-row .button-play.button-play:not(:hover)::after {
|
||
border-radius: 500px;
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.tl-row .button-play.button-play:not(:hover)::after, .card.playing.tl-row .button-play.button-play:not(:hover)::after {
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tl-row.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover, .card.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active, .card.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active::after, .card.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
.tl-row.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active, .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover, .card.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active, .card.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active::after, .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after, .card.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active::after, .card.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
}
|
||
.tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active, .card.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active::after, .card.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active::after {
|
||
box-shadow: inset 0 0 0 1px transparent;
|
||
}
|
||
.tl-row.playing.tl-row .button-play.button-play:not(:hover)::before,
|
||
.card.playing.tl-row .button-play.button-play:not(:hover)::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f15e";
|
||
font-size: 14px;
|
||
line-height: 28px;
|
||
}
|
||
.tl-row.playing.tl-row .button-play.button-play:hover::before,
|
||
.card.playing.tl-row .button-play.button-play:hover::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f130";
|
||
font-size: 14px;
|
||
line-height: 28px;
|
||
}
|
||
|
||
.tl-row.contextmenu-active .tl-type__icon,
|
||
.tl-row:hover .tl-type__icon {
|
||
display: none;
|
||
}
|
||
|
||
.tl-save .button,
|
||
.tl-more .button {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.tl-save .button:focus,
|
||
.tl-more .button:focus {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.tl-row:hover .tl-save .button,
|
||
.tl-row:hover .tl-more .button,
|
||
.tl-row.selection-focus .tl-save .button,
|
||
.tl-row.selection-focus .tl-more .button {
|
||
visibility: visible;
|
||
}
|
||
|
||
.tl-save {
|
||
padding: 0 10px;
|
||
}
|
||
.tl-save .button {
|
||
width: 20px !important;
|
||
visibility: visible;
|
||
}
|
||
.tl-save .button::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f138";
|
||
font-size: 16px;
|
||
line-height: inherit;
|
||
}
|
||
.tl-save .button::before {
|
||
padding-left: 2px;
|
||
}
|
||
|
||
|
||
.tl-save .button::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f320";
|
||
font-size: 16px;
|
||
line-height: inherit;
|
||
}
|
||
|
||
.tl-more .button::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f12c";
|
||
font-size: 16px;
|
||
line-height: inherit;
|
||
}
|
||
|
||
.tl-feedback {
|
||
width: 60px;
|
||
}
|
||
|
||
.tl-feedback {
|
||
padding: 0 5px;
|
||
}
|
||
.tl-feedback .button {
|
||
visibility: hidden;
|
||
width: 24px;
|
||
}
|
||
.tl-feedback .button.button-icon-only::before {
|
||
padding-left: 4px;
|
||
}
|
||
|
||
.tl-feedback.thumbs-down .button-thumbs-down, .tl-feedback.thumbs-down .spoticon-ban-16, .tl-feedback.thumbs-down .spoticon-ban-active-16, .tl-feedback.thumbs-down .spoticon-block-16, .tl-feedback.thumbs-down .spoticon-block-active-16, .tl-feedback.thumbs-up .button-thumbs-up, .tl-feedback.thumbs-up .spoticon-heart-active-16 {
|
||
pointer-events: none;
|
||
visibility: visible;
|
||
}
|
||
.tl-feedback.thumbs-down .button-thumbs-down.allows-undo, .tl-feedback.thumbs-down .spoticon-ban-16.allows-undo, .tl-feedback.thumbs-down .spoticon-ban-active-16.allows-undo, .tl-feedback.thumbs-down .spoticon-block-16.allows-undo, .tl-feedback.thumbs-down .spoticon-block-active-16.allows-undo, .tl-feedback.thumbs-up .button-thumbs-up.allows-undo, .tl-feedback.thumbs-up .spoticon-heart-active-16.allows-undo {
|
||
pointer-events: auto;
|
||
}
|
||
.offline .tl-feedback.thumbs-down .button-thumbs-down, .offline .tl-feedback.thumbs-down .spoticon-ban-16, .offline .tl-feedback.thumbs-down .spoticon-ban-active-16, .offline .tl-feedback.thumbs-down .spoticon-block-16, .offline .tl-feedback.thumbs-down .spoticon-block-active-16, .offline .tl-feedback.thumbs-up .button-thumbs-up, .offline .tl-feedback.thumbs-up .spoticon-heart-active-16 {
|
||
pointer-events: none;
|
||
}
|
||
|
||
.tl-feedback {
|
||
width: 40px;
|
||
}
|
||
.tl-feedback .button-thumbs-up, .tl-feedback .button.spoticon-heart-16, .tl-feedback .button.spoticon-heart-active-16 {
|
||
display: none;
|
||
}
|
||
.tl-feedback .button.button-thumbs-down::before, .tl-feedback .button.spoticon-ban-16::before, .tl-feedback .button.spoticon-ban-active-16::before {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
content: "\f31E";
|
||
font-size: 16px;
|
||
line-height: inherit;
|
||
}
|
||
.tl-feedback .button.spoticon-ban-active-16 {
|
||
color: #cd1a2b;
|
||
visibility: visible;
|
||
}
|
||
|
||
.tl-row.current .tl-cell:not(.tl-number),
|
||
.tl-row.current .tl-cell a:link,
|
||
.tl-row.current .tl-highlight {
|
||
color: #1ed760;
|
||
}
|
||
.tl-row.current .tl-feedback .button {
|
||
pointer-events: auto;
|
||
visibility: visible;
|
||
}
|
||
.offline .tl-row.current .tl-feedback .button {
|
||
pointer-events: none;
|
||
visibility: hidden;
|
||
}
|
||
.tl-row.playing .tl-type__icon {
|
||
display: none;
|
||
}
|
||
.tl-row.playing .tl-number-wrap {
|
||
display: none;
|
||
}
|
||
.tl-row.playing .button-play {
|
||
display: inline-block;
|
||
}
|
||
.tl-row.selected + .tl-row .tl-cell {
|
||
border-top-color: #181818;
|
||
}
|
||
.tl-row.selected .tl-cell {
|
||
background-color: #333333;
|
||
border-color: #181818;
|
||
}
|
||
.tl-row.added .tl-save .button {
|
||
visibility: visible;
|
||
}
|
||
.tl-row.offline-waiting .tl-save .button.button-add::before, .tl-row.offline-waiting.added .tl-save .button.button-add::before, .tl-row.offline-downloading .tl-save .button.button-add::before, .tl-row.offline-downloading.added .tl-save .button.button-add::before {
|
||
content: "";
|
||
line-height: 32px;
|
||
width: 18px;
|
||
}
|
||
.tl-row.offline-downloading .tl-save .button.button-add::before, .tl-row.offline-downloading.added .tl-save .button.button-add::before {
|
||
animation: glue-keyframes-rotate-ltr 1.5s linear infinite;
|
||
}
|
||
|
||
.tl-row.thumbs-down .tl-cell,
|
||
.tl-row.thumbs-down .tl-cell a:link,
|
||
.tl-row.thumbs-down .tl-highlight, .tl-row.unavailable .tl-cell,
|
||
.tl-row.unavailable .tl-cell a:link,
|
||
.tl-row.unavailable .tl-highlight {
|
||
color: #404040 !important;
|
||
}
|
||
.tl-row.thumbs-down .button-play, .tl-row.unavailable .button-play {
|
||
display: none !important;
|
||
}
|
||
.tl-row.thumbs-down .tl-number-wrap, .tl-row.unavailable .tl-number-wrap {
|
||
display: inline-block;
|
||
}
|
||
.tl-row.thumbs-down .tl-number, .tl-row.unavailable .tl-number {
|
||
color: #404040;
|
||
}
|
||
.tl-row.local .button-add {
|
||
visibility: hidden !important;
|
||
}
|
||
.tl-row--episode .tl-save .button {
|
||
visibility: hidden;
|
||
}
|
||
|
||
/**
|
||
* When using a scroll manager that makes sure the list only contains row DOM
|
||
* nodes for the rows that are visible, we should tell the browser to put the
|
||
* row in its own layer when painting. This will improve scroll performance as
|
||
* instead of repainting a huge texture that spans the entire list height, it
|
||
* just needs to repaint a few row textures and then composite the layers.
|
||
*/
|
||
.scroll-container-enabled .tl-row {
|
||
will-change: transform;
|
||
}
|
||
|
||
.offline .tl-row:not(.unavailable):not(.local) .tl-cell,
|
||
.offline .tl-row:not(.unavailable):not(.local) .tl-cell a:link,
|
||
.offline .tl-row:not(.unavailable):not(.local) .tl-highlight,
|
||
.offline .tl-row:not(.unavailable):not(.local) .tl-feedback button {
|
||
color: #404040 !important;
|
||
}
|
||
.offline .tl-row:not(.unavailable):not(.local) .button-play {
|
||
display: none !important;
|
||
}
|
||
.offline .tl-row:not(.unavailable):not(.local) .tl-number-wrap {
|
||
display: inline-block;
|
||
}
|
||
.offline .tl-row:not(.unavailable):not(.local) .tl-number {
|
||
color: #404040;
|
||
}
|
||
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded .tl-cell, .offline .tl-row:not(.unavailable):not(.local).locally-playable .tl-cell {
|
||
color: inherit !important;
|
||
}
|
||
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded .tl-cell a:link,
|
||
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded .tl-highlight, .offline .tl-row:not(.unavailable):not(.local).locally-playable .tl-cell a:link,
|
||
.offline .tl-row:not(.unavailable):not(.local).locally-playable .tl-highlight {
|
||
color: #ffffff !important;
|
||
}
|
||
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded:hover .button-play, .offline .tl-row:not(.unavailable):not(.local).offline-downloaded.playing .button-play, .offline .tl-row:not(.unavailable):not(.local).locally-playable:hover .button-play, .offline .tl-row:not(.unavailable):not(.local).locally-playable.playing .button-play {
|
||
display: inline-block !important;
|
||
}
|
||
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded:hover .tl-number-wrap, .offline .tl-row:not(.unavailable):not(.local).offline-downloaded.playing .tl-number-wrap, .offline .tl-row:not(.unavailable):not(.local).locally-playable:hover .tl-number-wrap, .offline .tl-row:not(.unavailable):not(.local).locally-playable.playing .tl-number-wrap {
|
||
display: none;
|
||
}
|
||
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded.current .tl-cell,
|
||
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded.current .tl-cell a:link,
|
||
.offline .tl-row:not(.unavailable):not(.local).offline-downloaded.current .tl-cell .tl-highlight, .offline .tl-row:not(.unavailable):not(.local).locally-playable.current .tl-cell,
|
||
.offline .tl-row:not(.unavailable):not(.local).locally-playable.current .tl-cell a:link,
|
||
.offline .tl-row:not(.unavailable):not(.local).locally-playable.current .tl-cell .tl-highlight {
|
||
color: #1ed760 !important;
|
||
}
|
||
|
||
.tl-row:hover .tl-cell, .tl-row.contextmenu-active .tl-cell {
|
||
background: #282828;
|
||
}
|
||
.tl-row:hover .tl-message, .tl-row.contextmenu-active .tl-message {
|
||
background: transparent;
|
||
}
|
||
.tl-row:hover .tl-highlight,
|
||
.tl-row.contextmenu-active .tl-highlight {
|
||
color: white;
|
||
}
|
||
.tl-row:hover.playing .tl-highlight,
|
||
.tl-row.contextmenu-active.playing .tl-highlight {
|
||
color: #1ed760;
|
||
}
|
||
.tl-row:hover .tl-number-wrap,
|
||
.tl-row.contextmenu-active .tl-number-wrap {
|
||
display: none;
|
||
}
|
||
.tl-row:hover.unavailable .tl-number-wrap,
|
||
.tl-row.contextmenu-active.unavailable .tl-number-wrap {
|
||
display: block;
|
||
}
|
||
.tl-row:hover .button-play,
|
||
.tl-row.contextmenu-active .button-play {
|
||
display: inline-block;
|
||
}
|
||
.tl-row:hover .tl-more .button,
|
||
.tl-row:hover .tl-save .button,
|
||
.tl-row.contextmenu-active .tl-more .button,
|
||
.tl-row.contextmenu-active .tl-save .button {
|
||
visibility: visible;
|
||
}
|
||
.tl-row:hover .tl-more .button:not([disabled])::before,
|
||
.tl-row:hover .tl-save .button:not([disabled])::before,
|
||
.tl-row.contextmenu-active .tl-more .button:not([disabled])::before,
|
||
.tl-row.contextmenu-active .tl-save .button:not([disabled])::before {
|
||
color: #ffffff;
|
||
}
|
||
.tl-row:hover .tl-more .button:not([disabled]):hover::before,
|
||
.tl-row:hover .tl-save .button:not([disabled]):hover::before,
|
||
.tl-row.contextmenu-active .tl-more .button:not([disabled]):hover::before,
|
||
.tl-row.contextmenu-active .tl-save .button:not([disabled]):hover::before {
|
||
color: #ffffff;
|
||
}
|
||
.tl-row:hover .tl-feedback .button,
|
||
.tl-row.contextmenu-active .tl-feedback .button {
|
||
visibility: visible;
|
||
}
|
||
.tl-row:hover .tl-feedback .button::before,
|
||
.tl-row.contextmenu-active .tl-feedback .button::before {
|
||
color: #b3b3b3;
|
||
}
|
||
.tl-row:hover .tl-feedback .button:hover::before,
|
||
.tl-row.contextmenu-active .tl-feedback .button:hover::before {
|
||
color: #ffffff;
|
||
}
|
||
.offline .tl-row:hover .tl-feedback .button,
|
||
.offline .tl-row.contextmenu-active .tl-feedback .button {
|
||
visibility: hidden;
|
||
}
|
||
.tl-row:hover.current .tl-highlight,
|
||
.tl-row.contextmenu-active.current .tl-highlight {
|
||
color: #1ed760;
|
||
}
|
||
.tl-row:hover.offline-waiting .tl-save .button.button-add.hover::before, .tl-row:hover.offline-downloading .tl-save .button.button-add.hover::before,
|
||
.tl-row.contextmenu-active.offline-waiting .tl-save .button.button-add.hover::before,
|
||
.tl-row.contextmenu-active.offline-downloading .tl-save .button.button-add.hover::before {
|
||
content: "";
|
||
}
|
||
.tl-row:hover.offline-waiting .tl-save .button.button-add.hover::before, .tl-row:hover.offline-downloading .tl-save .button.button-add.hover::before, .tl-row.contextmenu-active.offline-waiting .tl-save .button.button-add.hover::before, .tl-row.contextmenu-active.offline-downloading .tl-save .button.button-add.hover::before {
|
||
animation: none;
|
||
}
|
||
|
||
.tl-row:hover.offline-waiting.added .tl-save .button.button-add:hover::before, .tl-row:hover.offline-downloading.added .tl-save .button.button-add:hover::before,
|
||
.tl-row.contextmenu-active.offline-waiting.added .tl-save .button.button-add:hover::before,
|
||
.tl-row.contextmenu-active.offline-downloading.added .tl-save .button.button-add:hover::before {
|
||
content: "";
|
||
}
|
||
|
||
.tl-row--episode:hover .tl-save .button,
|
||
.tl-row--episode.contextmenu-active .tl-save .button {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.offline .tl-row:hover .tl-number-wrap {
|
||
display: block;
|
||
}
|
||
.offline .tl-row:hover.offline-downloaded .tl-number-wrap {
|
||
display: none;
|
||
}
|
||
|
||
.tl-row:hover .tl-explicit .label,
|
||
.tl-row:hover .tl-premium .label,
|
||
.tl-row.selection-focus .tl-explicit .label,
|
||
.tl-row.selection-focus .tl-premium .label {
|
||
color: #b3b3b3 !important;
|
||
}
|
||
|
||
.tl-row:hover .tl-explicit .label, .tl-row:hover .tl-premium .label, .tl-row.selection-focus .tl-explicit .label, .tl-row.selection-focus .tl-premium .label {
|
||
border-color: #404040 !important;
|
||
}
|
||
|
||
.tl-row.selection-focus-touch .tl-more .button {
|
||
visibility: visible;
|
||
}
|
||
|
||
.tl-highlight {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.tl-featuring a,
|
||
.tl-featuring span {
|
||
color: #b3b3b3;
|
||
}
|
||
.tl-featuring a:hover,
|
||
.tl-featuring span:hover {
|
||
color: #e6e6e6;
|
||
}
|
||
|
||
.tl-status-indicator {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
|
||
.tl-status-indicator {
|
||
border-radius: 50%;
|
||
border: 1px solid #2e77d0;
|
||
}
|
||
|
||
.tl-status-indicator {
|
||
margin-right: 2px;
|
||
}
|
||
|
||
|
||
|
||
.tl-status-indicator--new {
|
||
background-color: #2e77d0;
|
||
}
|
||
|
||
.tl-status-indicator--in-progress {
|
||
background: linear-gradient(to right, #2e77d0 0%, #2e77d0 55%, rgba(46, 119, 208, 0) 55%, rgba(46, 119, 208, 0) 100%);
|
||
}
|
||
|
||
|
||
|
||
.tl-item-local {
|
||
display: block;
|
||
width: 40px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.tl-item-local {
|
||
text-align: center;
|
||
}
|
||
|
||
.tl-explicit .label,
|
||
.tl-premium .label {
|
||
color: #404040;
|
||
letter-spacing: 0;
|
||
vertical-align: baseline;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.tl-explicit .label, .tl-premium .label {
|
||
background: transparent;
|
||
padding-top: 2px;
|
||
padding-bottom: 1px;
|
||
border: 1px solid #333333;
|
||
}
|
||
|
||
.tl-number,
|
||
.tl-time,
|
||
.tl-listen-count {
|
||
font-feature-settings: "tnum";
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.tl-sort-asc::after,
|
||
.tl-sort-desc::after {
|
||
font-family: "glue-spoticon";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: inline-block;
|
||
line-height: inherit;
|
||
vertical-align: bottom;
|
||
color: #1db954;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.tl-sort-asc::after, .tl-sort-desc::after {
|
||
margin-left: 4px;
|
||
}
|
||
|
||
|
||
|
||
.tl-sort-asc::after {
|
||
content: "\f112";
|
||
}
|
||
|
||
.tl-sort-desc::after {
|
||
content: "\f10c";
|
||
}
|
||
|
||
.tl-attention-highlight {
|
||
position: absolute;
|
||
height: 42px;
|
||
opacity: 0;
|
||
transition: opacity 1000ms cubic-bezier(1, 0, 0.7, 1);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.tl-attention-highlight {
|
||
border: 2px solid #2e77d0;
|
||
}
|
||
.tl-attention-highlight.visible {
|
||
transition: none;
|
||
opacity: 1;
|
||
}
|
||
|
||
th[data-sort]:hover {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.pop-meter {
|
||
width: 100%;
|
||
height: 9px;
|
||
position: relative;
|
||
}
|
||
|
||
.pop-meter-background,
|
||
.pop-meter-overlay {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: -1px;
|
||
height: 9px;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.pop-meter-background::after,
|
||
.pop-meter-overlay::after {
|
||
content: " ";
|
||
display: block;
|
||
position: absolute;
|
||
width: 2px;
|
||
height: 8px;
|
||
top: 0;
|
||
}
|
||
|
||
.pop-meter-background::after, .pop-meter-overlay::after {
|
||
transform: translate(0, 0.5px);
|
||
}
|
||
|
||
.pop-meter-background::after, .pop-meter-overlay::after {
|
||
left: -4px;
|
||
}
|
||
|
||
|
||
|
||
.pop-meter-background::after {
|
||
box-shadow: 4px 0 0 0 #404040, 8px 0 0 0 #404040, 12px 0 0 0 #404040, 16px 0 0 0 #404040, 20px 0 0 0 #404040, 24px 0 0 0 #404040, 28px 0 0 0 #404040, 32px 0 0 0 #404040, 36px 0 0 0 #404040, 40px 0 0 0 #404040, 44px 0 0 0 #404040, 48px 0 0 0 #404040;
|
||
}
|
||
|
||
|
||
|
||
.pop-meter-overlay::after {
|
||
box-shadow: 4px 0 0 0 #b3b3b3, 8px 0 0 0 #b3b3b3, 12px 0 0 0 #b3b3b3, 16px 0 0 0 #b3b3b3, 20px 0 0 0 #b3b3b3, 24px 0 0 0 #b3b3b3, 28px 0 0 0 #b3b3b3, 32px 0 0 0 #b3b3b3, 36px 0 0 0 #b3b3b3, 40px 0 0 0 #b3b3b3, 44px 0 0 0 #b3b3b3, 48px 0 0 0 #b3b3b3;
|
||
}
|
||
|
||
|
||
|
||
/* stylelint-disable selector-max-type */
|
||
/**
|
||
* Standard Throbber
|
||
*
|
||
* There's two versions available, the standard one (50px) and one large (70px).
|
||
* In IE9 there's no animation of the dots, just a grey symbol.
|
||
* The throbbers doesn't scale with the container, they're a fixed size.
|
||
*
|
||
* Markup:
|
||
* <div class="{$modifiers}"><div></div></div>
|
||
*
|
||
* .throbber - Your normal loading indicator (fetching content, etc)
|
||
* .throbber-large - Bigger version, suitable for full screen loading and similar.
|
||
*
|
||
* Styleguide 100.1
|
||
*/
|
||
@keyframes throbber-ltr {
|
||
7% {
|
||
box-shadow: 0 -15px white, 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
14% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.8), 11.25px -11.25px 0 white, 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
21% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.6), 11.25px -11.25px 0 rgba(255, 255, 255, 0.8), 15px 0 0 white, 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
28% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.4), 11.25px -11.25px 0 rgba(255, 255, 255, 0.6), 15px 0 0 rgba(255, 255, 255, 0.8), 11.25px 11.25px 0 white, 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
35% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.4), 15px 0 0 rgba(255, 255, 255, 0.6), 11.25px 11.25px 0 rgba(255, 255, 255, 0.8), 0 15px 0 white, -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
42% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.4), 11.25px 11.25px 0 rgba(255, 255, 255, 0.6), 0 15px 0 rgba(255, 255, 255, 0.8), -11.25px 11.25px 0 white, -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
49% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.4), 0 15px 0 rgba(255, 255, 255, 0.6), -11.25px 11.25px 0 rgba(255, 255, 255, 0.8), -15px 0 0 white, -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
56% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.4), -11.25px 11.25px 0 rgba(255, 255, 255, 0.6), -15px 0 0 rgba(255, 255, 255, 0.8), -11.25px -11.25px 0 white;
|
||
}
|
||
63% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.4), -15px 0 0 rgba(255, 255, 255, 0.6), -11.25px -11.25px 0 rgba(255, 255, 255, 0.8);
|
||
}
|
||
70% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.4), -11.25px -11.25px 0 rgba(255, 255, 255, 0.6);
|
||
}
|
||
77% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.4);
|
||
}
|
||
84% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
100% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
}
|
||
@keyframes throbber-rtl {
|
||
7% {
|
||
box-shadow: 0 -15px white, -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
14% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.8), -11.25px -11.25px 0 white, -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
21% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.6), -11.25px -11.25px 0 rgba(255, 255, 255, 0.8), -15px 0 0 white, -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
28% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.4), -11.25px -11.25px 0 rgba(255, 255, 255, 0.6), -15px 0 0 rgba(255, 255, 255, 0.8), -11.25px 11.25px 0 white, 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
35% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.4), -15px 0 0 rgba(255, 255, 255, 0.6), -11.25px 11.25px 0 rgba(255, 255, 255, 0.8), 0 15px 0 white, 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
42% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.4), -11.25px 11.25px 0 rgba(255, 255, 255, 0.6), 0 15px 0 rgba(255, 255, 255, 0.8), 11.25px 11.25px 0 white, 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
49% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.4), 0 15px 0 rgba(255, 255, 255, 0.6), 11.25px 11.25px 0 rgba(255, 255, 255, 0.8), 15px 0 0 white, 11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
56% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.4), 11.25px 11.25px 0 rgba(255, 255, 255, 0.6), 15px 0 0 rgba(255, 255, 255, 0.8), 11.25px -11.25px 0 white;
|
||
}
|
||
63% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.4), 15px 0 0 rgba(255, 255, 255, 0.6), 11.25px -11.25px 0 rgba(255, 255, 255, 0.8);
|
||
}
|
||
70% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.4), 11.25px -11.25px 0 rgba(255, 255, 255, 0.6);
|
||
}
|
||
77% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.4);
|
||
}
|
||
84% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
100% {
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
}
|
||
@keyframes throbberLarge-ltr {
|
||
7% {
|
||
box-shadow: 0 -26px white, 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
14% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.8), 19.5px -19.5px 0 white, 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
21% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.6), 19.5px -19.5px 0 rgba(255, 255, 255, 0.8), 26px 0 0 white, 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
28% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.4), 19.5px -19.5px 0 rgba(255, 255, 255, 0.6), 26px 0 0 rgba(255, 255, 255, 0.8), 19.5px 19.5px 0 white, 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
35% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.4), 26px 0 0 rgba(255, 255, 255, 0.6), 19.5px 19.5px 0 rgba(255, 255, 255, 0.8), 0 26px 0 white, -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
42% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.4), 19.5px 19.5px 0 rgba(255, 255, 255, 0.6), 0 26px 0 rgba(255, 255, 255, 0.8), -19.5px 19.5px 0 white, -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
49% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.4), 0 26px 0 rgba(255, 255, 255, 0.6), -19.5px 19.5px 0 rgba(255, 255, 255, 0.8), -26px 0 0 white, -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
56% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.4), -19.5px 19.5px 0 rgba(255, 255, 255, 0.6), -26px 0 0 rgba(255, 255, 255, 0.8), -19.5px -19.5px 0 white;
|
||
}
|
||
63% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.4), -26px 0 0 rgba(255, 255, 255, 0.6), -19.5px -19.5px 0 rgba(255, 255, 255, 0.8);
|
||
}
|
||
70% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.4), -19.5px -19.5px 0 rgba(255, 255, 255, 0.6);
|
||
}
|
||
77% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.4);
|
||
}
|
||
84% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
100% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
}
|
||
@keyframes throbberLarge-rtl {
|
||
7% {
|
||
box-shadow: 0 -26px white, -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
14% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.8), -19.5px -19.5px 0 white, -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
21% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.6), -19.5px -19.5px 0 rgba(255, 255, 255, 0.8), -26px 0 0 white, -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
28% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.4), -19.5px -19.5px 0 rgba(255, 255, 255, 0.6), -26px 0 0 rgba(255, 255, 255, 0.8), -19.5px 19.5px 0 white, 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
35% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.4), -26px 0 0 rgba(255, 255, 255, 0.6), -19.5px 19.5px 0 rgba(255, 255, 255, 0.8), 0 26px 0 white, 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
42% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.4), -19.5px 19.5px 0 rgba(255, 255, 255, 0.6), 0 26px 0 rgba(255, 255, 255, 0.8), 19.5px 19.5px 0 white, 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
49% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.4), 0 26px 0 rgba(255, 255, 255, 0.6), 19.5px 19.5px 0 rgba(255, 255, 255, 0.8), 26px 0 0 white, 19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
56% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.4), 19.5px 19.5px 0 rgba(255, 255, 255, 0.6), 26px 0 0 rgba(255, 255, 255, 0.8), 19.5px -19.5px 0 white;
|
||
}
|
||
63% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.4), 26px 0 0 rgba(255, 255, 255, 0.6), 19.5px -19.5px 0 rgba(255, 255, 255, 0.8);
|
||
}
|
||
70% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.4), 19.5px -19.5px 0 rgba(255, 255, 255, 0.6);
|
||
}
|
||
77% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.4);
|
||
}
|
||
84% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
100% {
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
}
|
||
.throbber {
|
||
position: relative;
|
||
height: 40px;
|
||
width: 40px;
|
||
}
|
||
.throbber div {
|
||
position: absolute;
|
||
top: 50%;
|
||
height: 8px;
|
||
width: 8px;
|
||
}
|
||
.throbber div {
|
||
background: transparent;
|
||
border-radius: 50%;
|
||
}
|
||
.throbber div {
|
||
left: 50%;
|
||
margin: -4px 0 0 -4px;
|
||
box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2);
|
||
animation: throbber-ltr 1.5s ease infinite;
|
||
}
|
||
|
||
|
||
.throbber-large {
|
||
position: relative;
|
||
height: 70px;
|
||
width: 70px;
|
||
}
|
||
.throbber-large div {
|
||
position: absolute;
|
||
top: 50%;
|
||
height: 12px;
|
||
width: 12px;
|
||
}
|
||
.throbber-large div {
|
||
background: transparent;
|
||
border-radius: 50%;
|
||
}
|
||
.throbber-large div {
|
||
left: 50%;
|
||
margin: -6px 0 0 -6px;
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
animation: throbberLarge-ltr 1.5s ease infinite;
|
||
}
|
||
|
||
|
||
/**
|
||
* Initial App Loading Throbber
|
||
*
|
||
* All apps should show the initial throbber in the center of the screen while the
|
||
* app is initially loading. This throbber is the large size (automatically) and centered.
|
||
*
|
||
* Markup:
|
||
* <div style="height: 300px; position: relative;">
|
||
* <div class="throbber-initial"><div></div></div>
|
||
* </div>
|
||
*
|
||
* Styleguide 100.1.1
|
||
*/
|
||
.throbber-initial {
|
||
position: relative;
|
||
height: 70px;
|
||
width: 70px;
|
||
position: absolute;
|
||
top: 50%;
|
||
}
|
||
.throbber-initial {
|
||
margin-top: -35px;
|
||
}
|
||
.throbber-initial {
|
||
left: 50%;
|
||
margin-left: -35px;
|
||
}
|
||
|
||
.throbber-initial div {
|
||
position: absolute;
|
||
top: 50%;
|
||
height: 12px;
|
||
width: 12px;
|
||
}
|
||
.throbber-initial div {
|
||
background: transparent;
|
||
border-radius: 50%;
|
||
}
|
||
.throbber-initial div {
|
||
left: 50%;
|
||
margin: -6px 0 0 -6px;
|
||
box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2);
|
||
animation: throbberLarge-ltr 1.5s ease infinite;
|
||
}
|
||
|
||
|
||
/**
|
||
* Error and Offline Pages
|
||
*
|
||
* Just put the markup at the top of the page. (Best to use the template from GLUE!)
|
||
* To display simply add the class `.show-offline-screen` or `.show-error-screen`
|
||
* to the containing element. <br><br>
|
||
* <a class="button" href="error-and-offline.html">See demo!</a>
|
||
*
|
||
* CodeDisplay: $error-and-offline
|
||
*
|
||
* Styleguide 100.1
|
||
*/
|
||
.error-and-offline {
|
||
display: none;
|
||
position: absolute;
|
||
z-index: 1060;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
}
|
||
.error-and-offline {
|
||
text-align: center;
|
||
background-image: url("https://local_resource_host/images/error-bg.jpg");
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
.error-and-offline {
|
||
left: 0;
|
||
}
|
||
|
||
.error-and-offline::before {
|
||
content: " ";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.error-and-offline::before {
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
}
|
||
.error-and-offline::before {
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.error-and-offline > .container {
|
||
position: relative;
|
||
top: 50%;
|
||
}
|
||
.error-and-offline > .container {
|
||
transform: translateY(-50%);
|
||
}
|
||
.error-and-offline .offline-content,
|
||
.error-and-offline .error-content {
|
||
display: none;
|
||
}
|
||
.error-and-offline .offline-content > .button, .error-and-offline .error-content > .button {
|
||
margin-top: 32px;
|
||
}
|
||
.error-and-offline .offline-content-title,
|
||
.error-and-offline .error-content-title {
|
||
font-size: 28px;
|
||
line-height: 36px;
|
||
letter-spacing: -0.005em;
|
||
font-weight: var(--glue-font-weight-black);
|
||
color: #ffffff;
|
||
text-transform: none;
|
||
}
|
||
|
||
.error-and-offline .error-version {
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
.error-and-offline .error-version {
|
||
margin: 0 7px;
|
||
}
|
||
.error-and-offline .error-version {
|
||
right: 0;
|
||
}
|
||
|
||
|
||
.show-offline-screen .error-and-offline,
|
||
.show-offline-screen .offline-content {
|
||
display: block;
|
||
}
|
||
|
||
.show-error-screen .error-and-offline,
|
||
.show-error-screen .error-content {
|
||
display: block;
|
||
}
|
||
|
||
.interaction-debug {
|
||
/* stylelint-disable selector-max-type */
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes {
|
||
/* stylelint-disable selector-max-type */
|
||
/*
|
||
This file contains styles not directly related to debugger,
|
||
but they make wireframes looks better by removing some margins, paddings, etc.,
|
||
which are set by UI frameworks or added by app developers.
|
||
*/
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes [data-interaction-target], .interaction-debug.interaction-debug-wireframes a[data-interaction-target] {
|
||
border: 3px solid red !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes [data-interaction-context] {
|
||
border: 2px solid gray !important;
|
||
padding: 15px !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes [data-interaction-context]::before {
|
||
color: white !important;
|
||
content: attr(data-interaction-context) !important;
|
||
display: table !important;
|
||
font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
|
||
font-size: 14px !important;
|
||
font-weight: bold !important;
|
||
line-height: 14px !important;
|
||
position: relative !important;
|
||
top: -16px !important;
|
||
z-index: 2147483647;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes [data-interaction-context]::before {
|
||
background: gray !important;
|
||
padding: 4px !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes [data-interaction-context]::before {
|
||
left: -15px !important;
|
||
}
|
||
|
||
.interaction-debug.interaction-debug-wireframes [data-interaction-target][data-interaction-context],
|
||
.interaction-debug.interaction-debug-wireframes [data-interaction-list] > *[data-interaction-target] {
|
||
outline: 3px solid red !important;
|
||
outline-offset: -7px !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes [data-interaction-list] {
|
||
counter-reset: interaction-context !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes [data-interaction-list] > * {
|
||
border: 2px solid gray !important;
|
||
padding: 15px !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes [data-interaction-list] > *::before {
|
||
color: white !important;
|
||
content: counter(interaction-context) !important;
|
||
counter-increment: interaction-context !important;
|
||
display: table !important;
|
||
font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
|
||
font-size: 14px !important;
|
||
font-weight: bold !important;
|
||
line-height: 14px !important;
|
||
position: relative !important;
|
||
top: -16px !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes [data-interaction-list] > *::before {
|
||
background: gray !important;
|
||
padding: 4px !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes [data-interaction-list] > *::before {
|
||
left: -15px !important;
|
||
}
|
||
|
||
.interaction-debug.interaction-debug-wireframes [data-interaction-list] > *:first-child::before {
|
||
counter-increment: none !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes a:not([data-interaction-target]) {
|
||
border: 3px solid #a0940e !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes button:not([data-interaction-target]) {
|
||
border: 3px solid #a0940e !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes [data-sort]:not([data-interaction-target]) {
|
||
border: 3px solid #a0940e !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes .card-puff__link[data-interaction-target].card-hit-area-counter-scale {
|
||
border: 3px solid red !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes .glue-page-header--with-navbar .glue-page-header__content-wrapper {
|
||
height: auto !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes .navbar-fixed-wrapper {
|
||
height: auto !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes .navbar.sticky-top {
|
||
background-color: #121212 !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes .scroll-container-enabled .tl-row {
|
||
will-change: unset !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes .card-info-wrapper {
|
||
height: auto !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes table {
|
||
border-collapse: collapse !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes a {
|
||
display: block !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes tr[data-interaction-context]::before {
|
||
display: none !important;
|
||
}
|
||
.interaction-debug.interaction-debug-wireframes .row {
|
||
margin-left: 0 !important;
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
.interaction-debug .interaction-debug-top-level {
|
||
padding-right: 300px;
|
||
}
|
||
|
||
.interaction-debug .interaction-debugger-panel-root {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 300px;
|
||
word-break: break-word;
|
||
}
|
||
.interaction-debug .interaction-debugger-panel-root {
|
||
right: 0;
|
||
}
|
||
|
||
.interaction-debug [data-interaction-target].highlighted {
|
||
visibility: visible !important;
|
||
outline: 5px solid yellow !important;
|
||
}
|
||
.interaction-debug .highlight-overlay {
|
||
opacity: 0.7;
|
||
z-index: 2147483647;
|
||
}
|
||
.interaction-debug .highlight-overlay {
|
||
background: red;
|
||
}
|
||
.interaction-debug .interaction-debugger-panel {
|
||
position: absolute;
|
||
user-select: text;
|
||
}
|
||
.interaction-debug .interaction-debugger-panel {
|
||
padding: 0 3px;
|
||
}
|
||
.interaction-debug .interaction-debugger-panel {
|
||
right: 0;
|
||
}
|
||
|
||
.interaction-debug .key-value-pair {
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
.interaction-debug .key-value-pair span {
|
||
color: #f00;
|
||
}
|
||
.interaction-debug .debug-section {
|
||
margin-top: 40px;
|
||
} |