@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: var(--modspotify_sidebar_and_player_bg);
}
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 var(--modspotify_secondary_fg);
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: var(--modspotify_secondary_fg);
text-transform: none;
color: var(--modspotify_secondary_fg);
-webkit-tap-highlight-color: transparent;
position: relative;
min-height: 100vh;
user-select: none;
}
body {
background-color: var(--modspotify_main_bg);
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: var(--modspotify_main_fg);
text-decoration: none;
}
a {
border-bottom: 1px solid transparent;
}
a:hover,
a:focus,
a.contextmenu-active {
color: var(--modspotify_main_fg);
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: var(--modspotify_secondary_fg);
}
/* 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:
*
* Item 1
*
*
* Item 2
*
*
* Item 3
*
*
* Item 4
*
*
* Item 5
*
*
*
* Item 1
*
*
* Item 2
*
*
* Item 3
*
*
* Item 4
*
*
* Item 5
*
*
* Item 6
*
*
* Item 7
*
*
* Item 8
*
*
*
*
*
*
* 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: var(--modspotify_main_bg);
}
.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: var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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: var(--modspotify_secondary_fg);
}
.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: var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_main_bg);
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, var(--modspotify_main_bg), var(--modspotify_main_bg) 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:
* Text
*
*
* 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: var(--modspotify_main_bg);
}
.dnd-image-shelter {
left: 0;
}
.dnd-image {
position: fixed;
top: 0;
color: var(--modspotify_main_fg);
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: var(--modspotify_main_fg);
z-index: -2;
}
.dnd-image::before {
background: var(--modspotify_sidebar_and_player_bg);
border-radius: 4px;
box-shadow: 0 2px 5px var(--modspotify_sidebar_and_player_bg);
}
.dnd-image::before {
right: 0;
left: 0;
}
.tr-drag-indicator {
position: absolute;
pointer-events: none;
}
.tr-drag-indicator {
border-top: 1px solid var(--modspotify_indicator_fg_and_button_bg);
}
/* stylelint-disable selector-max-type */
/**
* Code
*
* Styleguide 20.7
*/
/**
* Inline
*
* Wrap inline snippets of code
*
* Markup:
* For example, <section> should be wrapped as inline.
*
* Styleguide 20.7.1
*/
/**
* Block
*
* Markup:
* <p>Sample text here...</p>
*
* 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: var(--modspotify_secondary_fg);
text-transform: none;
font-size: 12px;
}
code {
white-space: nowrap;
}
code {
padding: 2px 4px;
background-color: var(--modspotify_sidebar_and_player_bg);
border-radius: 4px;
}
pre {
color: var(--modspotify_secondary_fg);
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: var(--modspotify_sidebar_and_player_bg);
}
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: var(--modspotify_secondary_fg);
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: var(--modspotify_main_fg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-green {
padding-top: 1px;
border-radius: 16px;
background: var(--modspotify_indicator_fg_and_button_bg);
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: var(--modspotify_main_fg);
}
.button.button-green.contextmenu-active, .button.button-green:not(:disabled):hover {
background-color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.button.button-green:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.button.button-green:not(:disabled):hover:active {
background: var(--modspotify_pressing_button_bg);
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: var(--modspotify_sidebar_and_player_bg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-white {
padding-top: 1px;
border-radius: 16px;
background: var(--modspotify_main_fg);
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: var(--modspotify_sidebar_and_player_bg);
}
.button.button-white.contextmenu-active, .button.button-white:not(:disabled):hover {
background-color: var(--modspotify_main_fg);
}
.button.button-white:not(:disabled):hover:active {
color: var(--modspotify_sidebar_and_player_bg);
}
.button.button-white:not(:disabled):hover:active {
background: var(--modspotify_secondary_fg);
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: var(--modspotify_main_fg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-blue {
padding-top: 1px;
border-radius: 16px;
background: var(--modspotify_miscellaneous_hover_bg);
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: var(--modspotify_main_fg);
}
.button.button-blue.contextmenu-active, .button.button-blue:not(:disabled):hover {
background-color: var(--modspotify_miscellaneous_bg);
}
.button.button-blue:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.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: var(--modspotify_main_fg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-red {
padding-top: 1px;
border-radius: 16px;
background: var(--modspotify_miscellaneous_bg);
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: var(--modspotify_main_fg);
}
.button.button-red.contextmenu-active, .button.button-red:not(:disabled):hover {
background-color: var(--modspotify_miscellaneous_hover_bg);
}
.button.button-red:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.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: var(--modspotify_main_fg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-gray {
padding-top: 1px;
border-radius: 16px;
background: var(--modspotify_slider_bg);
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: var(--modspotify_main_fg);
}
.button.button-gray.contextmenu-active, .button.button-gray:not(:disabled):hover {
background-color: var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.button.button-gray:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.button.button-gray:not(:disabled):hover:active {
background: var(--modspotify_scrollbar_fg_and_selected_row_bg);
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: var(--modspotify_main_fg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-with-stroke {
padding-top: 1px;
border-radius: 16px;
background: rgba(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
transition-property: transform, box-shadow, color, background-color;
box-shadow: inset 0 0 0 1px var(--modspotify_secondary_fg);
}
.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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
}
.button.button-with-stroke:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.button.button-with-stroke:not(:disabled):hover:active {
background: rgba(var(--modspotify_rgb_sidebar_and_player_bg),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 var(--modspotify_secondary_fg);
}
.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 var(--modspotify_main_fg), 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 var(--modspotify_main_fg);
}
@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 var(--modspotify_main_fg);
}
.button.button-with-stroke.contextmenu-active::after, .button.button-with-stroke:not(:disabled):hover::after {
box-shadow: inset 0 0 0 1px var(--modspotify_main_fg);
}
}
.button.button-with-stroke:not(:disabled):hover:active {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.button.button-with-stroke:not(:disabled):hover:active::after {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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: var(--modspotify_main_fg);
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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
transition-property: transform, box-shadow, color, background-color;
box-shadow: inset 0 0 0 1px var(--modspotify_secondary_fg);
}
.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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
}
.button.button-with-stroke.added:not(:disabled):hover:active, .button.button-with-stroke.active:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.button.button-with-stroke.added:not(:disabled):hover:active, .button.button-with-stroke.active:not(:disabled):hover:active {
background: rgba(var(--modspotify_rgb_sidebar_and_player_bg),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 var(--modspotify_secondary_fg);
}
.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 var(--modspotify_main_fg), 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 var(--modspotify_main_fg);
}
@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 var(--modspotify_main_fg);
}
.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 var(--modspotify_main_fg);
}
}
.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 var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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 var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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: var(--modspotify_main_fg);
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: var(--modspotify_main_fg);
}
.button.button-facebook.contextmenu-active, .button.button-facebook:not(:disabled):hover {
background-color: #3762ba;
}
.button.button-facebook:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.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: var(--modspotify_secondary_fg);
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: var(--modspotify_main_fg);
}
.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: var(--modspotify_secondary_fg);
}
.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: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.button.button-icon-only.active.contextmenu-active, .button.button-icon-only.active:not(:disabled):hover {
color: var(--modspotify_indicator_fg_and_button_bg);
}
.button.button-icon-only.active:not(:disabled):hover:active {
color: var(--modspotify_selected_button);
}
.button.button-icon-only.drop-target-active {
color: var(--modspotify_sidebar_and_player_bg);
}
.button.button-icon-only.drop-target-active {
background-color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.button.button-icon-only.drop-target-active.contextmenu-active, .button.button-icon-only.drop-target-active:not(:disabled):hover {
color: var(--modspotify_sidebar_and_player_bg);
}
.button.button-icon-only.drop-target-active:not(:disabled):hover:active {
color: var(--modspotify_sidebar_and_player_bg);
}
.button.button-icon-only.drop-target-active.contextmenu-active, .button.button-icon-only.drop-target-active:not(:disabled):hover {
background-color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.button.button-icon-with-stroke {
height: 32px;
line-height: 30px;
color: var(--modspotify_main_fg);
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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
transition-property: transform, box-shadow, color, background-color;
box-shadow: inset 0 0 0 1px var(--modspotify_secondary_fg);
}
.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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
}
.button.button-icon-with-stroke:not(:disabled):hover:active {
color: var(--modspotify_secondary_fg);
}
.button.button-icon-with-stroke:not(:disabled):hover:active {
background: rgba(var(--modspotify_rgb_sidebar_and_player_bg),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 var(--modspotify_secondary_fg);
}
.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 var(--modspotify_main_fg), 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 var(--modspotify_main_fg);
}
@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 var(--modspotify_main_fg);
}
.button.button-icon-with-stroke.contextmenu-active::after, .button.button-icon-with-stroke:not(:disabled):hover::after {
box-shadow: inset 0 0 0 1px var(--modspotify_main_fg);
}
}
.button.button-icon-with-stroke:not(:disabled):hover:active {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.button.button-icon-with-stroke:not(:disabled):hover:active::after {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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: var(--modspotify_main_fg);
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: var(--modspotify_indicator_fg_and_button_bg);
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: var(--modspotify_main_fg);
}
.button.button-large.button-green.contextmenu-active, .button.button-large.button-green:not(:disabled):hover {
background-color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.button.button-large.button-green:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.button.button-large.button-green:not(:disabled):hover:active {
background: var(--modspotify_pressing_button_bg);
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: var(--modspotify_sidebar_and_player_bg);
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: var(--modspotify_main_fg);
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: var(--modspotify_sidebar_and_player_bg);
}
.button.button-large.button-white.contextmenu-active, .button.button-large.button-white:not(:disabled):hover {
background-color: var(--modspotify_main_fg);
}
.button.button-large.button-white:not(:disabled):hover:active {
color: var(--modspotify_sidebar_and_player_bg);
}
.button.button-large.button-white:not(:disabled):hover:active {
background: var(--modspotify_secondary_fg);
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: var(--modspotify_main_fg);
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: var(--modspotify_miscellaneous_hover_bg);
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: var(--modspotify_main_fg);
}
.button.button-large.button-blue.contextmenu-active, .button.button-large.button-blue:not(:disabled):hover {
background-color: var(--modspotify_miscellaneous_bg);
}
.button.button-large.button-blue:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.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: var(--modspotify_main_fg);
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: var(--modspotify_miscellaneous_bg);
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: var(--modspotify_main_fg);
}
.button.button-large.button-red.contextmenu-active, .button.button-large.button-red:not(:disabled):hover {
background-color: var(--modspotify_miscellaneous_hover_bg);
}
.button.button-large.button-red:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.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: var(--modspotify_main_fg);
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: var(--modspotify_slider_bg);
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: var(--modspotify_main_fg);
}
.button.button-large.button-gray.contextmenu-active, .button.button-large.button-gray:not(:disabled):hover {
background-color: var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.button.button-large.button-gray:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.button.button-large.button-gray:not(:disabled):hover:active {
background: var(--modspotify_scrollbar_fg_and_selected_row_bg);
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: var(--modspotify_main_fg);
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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
transition-property: transform, box-shadow, color, background-color;
box-shadow: inset 0 0 0 1px var(--modspotify_secondary_fg);
}
.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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
}
.button.button-large.button-with-stroke:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.button.button-large.button-with-stroke:not(:disabled):hover:active {
background: rgba(var(--modspotify_rgb_sidebar_and_player_bg),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 var(--modspotify_secondary_fg);
}
.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 var(--modspotify_main_fg), 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 var(--modspotify_main_fg);
}
@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 var(--modspotify_main_fg);
}
.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 var(--modspotify_main_fg);
}
}
.button.button-large.button-with-stroke:not(:disabled):hover:active {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.button.button-large.button-with-stroke:not(:disabled):hover:active::after {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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: var(--modspotify_main_fg);
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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
transition-property: transform, box-shadow, color, background-color;
box-shadow: inset 0 0 0 1px var(--modspotify_secondary_fg);
}
.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(var(--modspotify_rgb_sidebar_and_player_bg),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: var(--modspotify_pressing_button_fg);
}
.button.button-large.button-with-stroke.added:not(:disabled):hover:active, .button.button-large.button-with-stroke.active:not(:disabled):hover:active {
background: rgba(var(--modspotify_rgb_sidebar_and_player_bg),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 var(--modspotify_secondary_fg);
}
.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 var(--modspotify_main_fg), 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 var(--modspotify_main_fg);
}
@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 var(--modspotify_main_fg);
}
.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 var(--modspotify_main_fg);
}
}
.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 var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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 var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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: var(--modspotify_main_fg);
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: var(--modspotify_main_fg);
}
.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: var(--modspotify_pressing_button_fg);
}
.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: var(--modspotify_secondary_fg);
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: var(--modspotify_main_fg);
}
.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: var(--modspotify_secondary_fg);
}
.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: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.button.button-large.button-icon-only.active.contextmenu-active, .button.button-large.button-icon-only.active:not(:disabled):hover {
color: var(--modspotify_indicator_fg_and_button_bg);
}
.button.button-large.button-icon-only.active:not(:disabled):hover:active {
color: var(--modspotify_selected_button);
}
.button.button-large.button-icon-only.drop-target-active {
color: var(--modspotify_sidebar_and_player_bg);
}
.button.button-large.button-icon-only.drop-target-active {
background-color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.button.button-large.button-icon-only.drop-target-active.contextmenu-active, .button.button-large.button-icon-only.drop-target-active:not(:disabled):hover {
color: var(--modspotify_sidebar_and_player_bg);
}
.button.button-large.button-icon-only.drop-target-active:not(:disabled):hover:active {
color: var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.button.button-large.button-icon-with-stroke {
height: 48px;
line-height: 46px;
color: var(--modspotify_main_fg);
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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
transition-property: transform, box-shadow, color, background-color;
box-shadow: inset 0 0 0 1px var(--modspotify_secondary_fg);
}
.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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
}
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active {
color: var(--modspotify_secondary_fg);
}
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active {
background: rgba(var(--modspotify_rgb_sidebar_and_player_bg),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 var(--modspotify_secondary_fg);
}
.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 var(--modspotify_main_fg), 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 var(--modspotify_main_fg);
}
@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 var(--modspotify_main_fg);
}
.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 var(--modspotify_main_fg);
}
}
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.button.button-large.button-icon-with-stroke:not(:disabled):hover:active::after {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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: var(--modspotify_main_fg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-green {
padding-top: 1px;
border-radius: 12px;
background: var(--modspotify_indicator_fg_and_button_bg);
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: var(--modspotify_main_fg);
}
.button.button-small.button-green.contextmenu-active, .button.button-small.button-green:not(:disabled):hover {
background-color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.button.button-small.button-green:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.button.button-small.button-green:not(:disabled):hover:active {
background: var(--modspotify_pressing_button_bg);
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: var(--modspotify_sidebar_and_player_bg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-white {
padding-top: 1px;
border-radius: 12px;
background: var(--modspotify_main_fg);
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: var(--modspotify_sidebar_and_player_bg);
}
.button.button-small.button-white.contextmenu-active, .button.button-small.button-white:not(:disabled):hover {
background-color: var(--modspotify_main_fg);
}
.button.button-small.button-white:not(:disabled):hover:active {
color: var(--modspotify_sidebar_and_player_bg);
}
.button.button-small.button-white:not(:disabled):hover:active {
background: var(--modspotify_secondary_fg);
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: var(--modspotify_main_fg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-blue {
padding-top: 1px;
border-radius: 12px;
background: var(--modspotify_miscellaneous_hover_bg);
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: var(--modspotify_main_fg);
}
.button.button-small.button-blue.contextmenu-active, .button.button-small.button-blue:not(:disabled):hover {
background-color: var(--modspotify_miscellaneous_bg);
}
.button.button-small.button-blue:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.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: var(--modspotify_main_fg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-red {
padding-top: 1px;
border-radius: 12px;
background: var(--modspotify_miscellaneous_bg);
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: var(--modspotify_main_fg);
}
.button.button-small.button-red.contextmenu-active, .button.button-small.button-red:not(:disabled):hover {
background-color: var(--modspotify_miscellaneous_hover_bg);
}
.button.button-small.button-red:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.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: var(--modspotify_main_fg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
}
.button.button-small.button-gray {
padding-top: 1px;
border-radius: 12px;
background: var(--modspotify_slider_bg);
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: var(--modspotify_main_fg);
}
.button.button-small.button-gray.contextmenu-active, .button.button-small.button-gray:not(:disabled):hover {
background-color: var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.button.button-small.button-gray:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.button.button-small.button-gray:not(:disabled):hover:active {
background: var(--modspotify_scrollbar_fg_and_selected_row_bg);
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: var(--modspotify_main_fg);
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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
transition-property: transform, box-shadow, color, background-color;
box-shadow: inset 0 0 0 1px var(--modspotify_secondary_fg);
}
.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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
}
.button.button-small.button-with-stroke:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.button.button-small.button-with-stroke:not(:disabled):hover:active {
background: rgba(var(--modspotify_rgb_sidebar_and_player_bg),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 var(--modspotify_secondary_fg);
}
.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 var(--modspotify_main_fg), 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 var(--modspotify_main_fg);
}
@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 var(--modspotify_main_fg);
}
.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 var(--modspotify_main_fg);
}
}
.button.button-small.button-with-stroke:not(:disabled):hover:active {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.button.button-small.button-with-stroke:not(:disabled):hover:active::after {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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: var(--modspotify_main_fg);
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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
transition-property: transform, box-shadow, color, background-color;
box-shadow: inset 0 0 0 1px var(--modspotify_secondary_fg);
}
.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(var(--modspotify_rgb_sidebar_and_player_bg),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: var(--modspotify_pressing_button_fg);
}
.button.button-small.button-with-stroke.added:not(:disabled):hover:active, .button.button-small.button-with-stroke.active:not(:disabled):hover:active {
background: rgba(var(--modspotify_rgb_sidebar_and_player_bg),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 var(--modspotify_secondary_fg);
}
.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 var(--modspotify_main_fg), 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 var(--modspotify_main_fg);
}
@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 var(--modspotify_main_fg);
}
.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 var(--modspotify_main_fg);
}
}
.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 var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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 var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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: var(--modspotify_main_fg);
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: var(--modspotify_main_fg);
}
.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: var(--modspotify_pressing_button_fg);
}
.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: var(--modspotify_secondary_fg);
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: var(--modspotify_main_fg);
}
.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: var(--modspotify_secondary_fg);
}
.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: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.button.button-small.button-icon-only.active.contextmenu-active, .button.button-small.button-icon-only.active:not(:disabled):hover {
color: var(--modspotify_indicator_fg_and_button_bg);
}
.button.button-small.button-icon-only.active:not(:disabled):hover:active {
color: var(--modspotify_selected_button);
}
.button.button-small.button-icon-only.drop-target-active {
color: var(--modspotify_sidebar_and_player_bg);
}
.button.button-small.button-icon-only.drop-target-active {
background-color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.button.button-small.button-icon-only.drop-target-active.contextmenu-active, .button.button-small.button-icon-only.drop-target-active:not(:disabled):hover {
color: var(--modspotify_sidebar_and_player_bg);
}
.button.button-small.button-icon-only.drop-target-active:not(:disabled):hover:active {
color: var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.button.button-small.button-icon-with-stroke {
height: 24px;
line-height: 22px;
color: var(--modspotify_main_fg);
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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
transition-property: transform, box-shadow, color, background-color;
box-shadow: inset 0 0 0 1px var(--modspotify_secondary_fg);
}
.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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
}
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active {
color: var(--modspotify_secondary_fg);
}
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active {
background: rgba(var(--modspotify_rgb_sidebar_and_player_bg),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 var(--modspotify_secondary_fg);
}
.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 var(--modspotify_main_fg), 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 var(--modspotify_main_fg);
}
@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 var(--modspotify_main_fg);
}
.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 var(--modspotify_main_fg);
}
}
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.button.button-small.button-icon-with-stroke:not(:disabled):hover:active::after {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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: var(--modspotify_indicator_fg_and_button_bg);
}
.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: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.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: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.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: var(--modspotify_selected_button);
}
.added .button.button-icon-only.button-add {
color: var(--modspotify_main_fg);
}
.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: var(--modspotify_main_fg);
}
/**
* 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:
* Some button
*
*
* Some button
*
*
* Styleguide 25.1
*/
/**
* Icon buttons
*
* Styleguide 25.2
*/
/**
* With text
*
* Markup:
* Start Radio
*
*
* Styleguide 25.2.1
*/
/**
* Without text
*
* Markup:
* Play
* Start Radio
* Pause
*
*
* Play
* Start Radio
* Pause
*
*
* Play
* Start Radio
* Pause
*
*
* Play
* Start Radio
* Pause
*
*
* Play
* Start Radio
* Pause
*
*
* Styleguide 25.3.1
*/
/**
* Save / Follow
*
* Markup:
*
* Save
* Saved
* Remove
*
*
* Save
* Saved
* Remove
*
*
* Follow
* Following
* Unfollow
*
*
* Follow
* Following
* Unfollow
*
*
* Styleguide 25.3.2
*/
/**
* In the style of an tag
*
* Markup: Take a Survey
*
* Styleguide 25.3.3
*/
/**
* Button Groups
*
* Styleguide 25.4
*/
/**
* With Icons
*
* Markup:
*
*
* Styleguide 25.4.1
*/
/**
* With Single letters
*
* Markup:
* A
* A
* B
* B
* C
* C
*
*
* Styleguide 25.4.2
*/
/* stylelint-disable selector-max-type */
/**
* Forms
*
* Markup:
*
* Styleguide 25.5
*/
/**
* Inline Form
*
* Markup:
*
* Styleguide 25.5.1
*/
/**
* Horizontal Form
*
* Markup:
*
* Styleguide 25.5.2
*/
/**
* Checks and Radio Buttons
*
* Markup:
*
*
*
*
*
*
*
*
*
*
*
*
* Styleguide 25.5.2
*/
/**
* Checks and Radio Buttons Inline
*
* Markup:
*
*
*
*
*
*
*
* 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:
*
* Styleguide 25.5.5
*/
fieldset {
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
font-size: 21px;
line-height: inherit;
color: var(--modspotify_secondary_fg);
}
legend {
padding: 0;
margin-bottom: 20px;
border: 0;
border-bottom: 1px solid var(--modspotify_sidebar_and_player_bg);
}
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: var(--modspotify_slider_bg);
vertical-align: middle;
}
output {
padding-top: 4px;
}
.form-control {
display: block;
width: 100%;
height: 31px;
font-size: 14px;
line-height: 20px;
color: var(--modspotify_slider_bg);
vertical-align: middle;
transition: all 0.1s ease-in-out;
}
.form-control {
padding: 5px 12px 4px;
background-color: var(--modspotify_main_fg);
background-image: none;
border: 1px solid var(--modspotify_main_fg);
border-radius: 4px;
}
.body-container--windows .form-control, .body-container--unknown-os .form-control {
border-radius: 0;
}
.form-control:focus {
outline: 0;
color: var(--modspotify_main_bg);
}
.form-control:focus {
border-color: var(--modspotify_main_fg);
background-color: var(--modspotify_main_fg);
}
.form-control::placeholder {
color: var(--modspotify_slider_bg);
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: var(--modspotify_secondary_fg);
}
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: var(--modspotify_main_fg);
}
.has-warning .form-control {
border-color: var(--modspotify_main_fg);
box-shadow: inset 0 1px 1px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),0.075);
}
.has-warning .form-control:focus {
border-color: var(--modspotify_pressing_fg);
box-shadow: inset 0 1px 1px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),0.075), 0 0 6px var(--modspotify_main_fg);
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
color: var(--modspotify_miscellaneous_bg);
}
.has-error .form-control {
border-color: var(--modspotify_miscellaneous_bg);
box-shadow: inset 0 1px 1px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),0.075);
}
.has-error .form-control:focus {
border-color: #a01422;
box-shadow: inset 0 1px 1px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),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: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.has-success .form-control {
border-color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
box-shadow: inset 0 1px 1px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),0.075);
}
.has-success .form-control:focus {
border-color: #18aa4c;
box-shadow: inset 0 1px 1px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),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: var(--modspotify_sidebar_and_player_bg);
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: var(--modspotify_secondary_fg);
text-transform: none;
color: var(--modspotify_secondary_fg);
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: var(--modspotify_sidebar_and_player_bg);
border: 1px solid rgba(var(--modspotify_rgb_cover_overlay_and_shadow),0.15);
border-radius: 8px;
box-shadow: 0 4px 12px 4px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),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 var(--modspotify_sidebar_and_player_bg);
}
.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 var(--modspotify_sidebar_and_player_bg);
}
.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 var(--modspotify_sidebar_and_player_bg);
}
.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 var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_pressing_fg);
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: var(--modspotify_slider_bg);
}
.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: var(--modspotify_sidebar_indicator_and_hover_button_bg);
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: var(--modspotify_slider_bg);
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:focus,
.dropdown-interior-menu > .disabled > a,
.dropdown-interior-menu > .disabled > a:focus {
color: rgba(var(--modspotify_rgb_secondary_fg),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: var(--modspotify_secondary_fg);
margin-right: -7px;
}
.dropdown-submenu:hover > a::after {
border-left-color: var(--modspotify_pressing_fg);
}
.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:
*
Normailizes header sizes
*
*
.table to any <table>. 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 var(--modspotify_sidebar_and_player_bg);
}
.table tbody > tr:last-child > td {
border-bottom: 1px solid var(--modspotify_sidebar_and_player_bg);
}
.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 var(--modspotify_sidebar_and_player_bg);
border-top: 1px solid var(--modspotify_sidebar_and_player_bg);
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: var(--modspotify_main_fg);
}
a.list-group-item .list-group-item-text {
color: var(--modspotify_secondary_fg);
}
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: var(--modspotify_main_fg);
}
a.list-group-item.active {
background-color: var(--modspotify_indicator_fg_and_button_bg);
border-color: var(--modspotify_indicator_fg_and_button_bg);
}
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: var(--modspotify_scrollbar_fg_and_selected_row_bg);
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: var(--modspotify_indicator_fg_and_button_bg);
}
.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: var(--modspotify_miscellaneous_hover_bg);
}
.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: var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_main_fg);
}
.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: var(--modspotify_secondary_fg);
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 var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_secondary_fg);
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: var(--modspotify_main_fg);
}
.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: var(--modspotify_main_fg);
}
.nav > li.active > a::after {
background-color: var(--modspotify_indicator_fg_and_button_bg);
}
.nav > li.disabled > a {
color: var(--modspotify_secondary_fg);
}
.nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
color: var(--modspotify_secondary_fg);
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: var(--modspotify_main_fg);
}
.nav.open > a, .nav.open > a:hover, .nav.open > a:focus {
background-color: var(--modspotify_main_fg);
border-color: var(--modspotify_main_fg);
}
.nav.open > a .caret, .nav.open > a:hover .caret, .nav.open > a:focus .caret {
border-top-color: var(--modspotify_main_fg);
border-bottom-color: var(--modspotify_main_fg);
}
.nav > .pull-right {
float: right;
}
.nav .nav-divider {
height: 2px;
overflow: hidden;
}
.nav .nav-divider {
margin: 9px 0;
background-color: var(--modspotify_pressing_fg);
border-bottom: 1px solid var(--modspotify_main_fg);
}
.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: var(--modspotify_secondary_fg);
border-bottom-color: var(--modspotify_secondary_fg);
}
.nav .active .caret {
border-top-color: var(--modspotify_main_fg);
border-bottom-color: var(--modspotify_main_fg);
}
.nav a:hover .caret {
border-top-color: var(--modspotify_main_fg);
border-bottom-color: var(--modspotify_main_fg);
}
.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: var(--modspotify_sidebar_and_player_bg);
border-bottom: 1px solid var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_secondary_fg);
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: var(--modspotify_secondary_fg);
text-decoration: none;
pointer-events: none;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.015em;
font-weight: var(--glue-font-weight-normal);
color: var(--modspotify_secondary_fg);
text-transform: none;
}
.tooltip, #tooltip {
padding: 3px 8px;
background-color: var(--modspotify_sidebar_and_player_bg);
border-radius: 4px;
box-shadow: 0 4px 12px 4px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),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 var(--modspotify_sidebar_and_player_bg);
}
.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 var(--modspotify_sidebar_and_player_bg);
}
.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 var(--modspotify_sidebar_and_player_bg);
}
.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 var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_sidebar_and_player_bg);
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 var(--modspotify_sidebar_and_player_bg);
}
.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 var(--modspotify_sidebar_and_player_bg);
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: var(--modspotify_sidebar_and_player_bg);
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 var(--modspotify_sidebar_and_player_bg);
}
.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 var(--modspotify_sidebar_and_player_bg);
}
.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 var(--modspotify_sidebar_and_player_bg);
}
.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 var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_sidebar_and_player_bg);
}
.popover.arrow-right.arrow-position-top::before {
border-left-color: var(--modspotify_sidebar_and_player_bg);
}
.popover.arrow-left.arrow-position-top::before {
border-right-color: var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_main_fg);
text-transform: none;
line-height: 36px;
color: var(--modspotify_main_fg);
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.popover-title {
margin: 0;
padding: 2px 8px 0;
text-align: center;
background-color: var(--modspotify_sidebar_and_player_bg);
border-bottom: 1px solid var(--modspotify_slider_bg);
}
.popover.closeable .popover-title {
padding-left: 32px;
}
.popover-content, .popover-footer, .popover-addendum {
padding: 9px 14px;
}
.popover-footer {
padding-top: 0;
background-color: var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_main_bg);
}
/**
* 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: var(--modspotify_secondary_fg);
}
.popover-addendum {
background-color: var(--modspotify_sidebar_and_player_bg);
border-top: 1px solid var(--modspotify_main_bg);
}
/**
* Modals
*
* Styleguide 50.6
*/
/**
* Modal Popovers
*
* A modal is just a special popover case. See a modal in action
*
* 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: var(--modspotify_main_bg);
}
.popover.modal {
right: 0;
left: 0;
box-shadow: 4px 6px 41px 0 rgba(var(--modspotify_rgb_cover_overlay_and_shadow),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: var(--modspotify_sidebar_and_player_bg);
}
.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:
*
* Styleguide 50.6.2
*/
.modal-generic {
background-color: var(--modspotify_main_bg);
}
.modal-generic .modal-generic-title {
font-size: 14px;
line-height: 20px;
letter-spacing: 0.015em;
font-weight: var(--glue-font-weight-bold);
color: var(--modspotify_main_fg);
text-transform: none;
}
.modal-generic .modal-generic-title {
background: var(--modspotify_sidebar_and_player_bg);
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: Something failed to do something.
*
* 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: var(--modspotify_secondary_fg);
text-transform: none;
color: var(--modspotify_main_fg);
}
.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: var(--modspotify_main_fg);
position: relative;
overflow: hidden;
}
.alert {
padding: 6px 35px;
margin-bottom: 20px;
background-color: var(--modspotify_miscellaneous_hover_bg);
}
.alert .alert-link {
color: var(--modspotify_main_fg);
}
.alert .alert-link:hover {
color: var(--modspotify_main_fg);
}
.alert::before {
color: var(--modspotify_main_fg);
}
.alert h4 {
color: inherit;
}
.alert h4 {
margin-top: 0;
}
.alert hr {
border-top-color: #296bbb;
}
.alert .close {
height: 32px;
line-height: 30px;
color: var(--modspotify_secondary_fg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
width: 32px;
color: var(--modspotify_main_fg);
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: var(--modspotify_main_fg);
}
.alert .close.contextmenu-active, .alert .close:not(:disabled):hover {
background-color: transparent;
}
.alert .close:not(:disabled):hover:active {
color: var(--modspotify_secondary_fg);
}
.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: var(--modspotify_main_fg);
}
.alert .close:not(:disabled):hover:active {
color: var(--modspotify_pressing_button_fg);
}
.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: var(--modspotify_main_fg) !important;
}
.alert a {
border-bottom: solid 1px var(--modspotify_main_fg) !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: var(--modspotify_indicator_fg_and_button_bg);
}
.alert-success .alert-link {
color: var(--modspotify_main_fg);
}
.alert-success .alert-link:hover {
color: var(--modspotify_main_fg);
}
.alert-success::before {
color: var(--modspotify_main_fg);
}
.alert-danger {
background-color: var(--modspotify_miscellaneous_hover_bg);
}
.alert-danger .alert-link {
color: var(--modspotify_main_fg);
}
.alert-danger .alert-link:hover {
color: var(--modspotify_main_fg);
}
.alert-danger::before {
color: var(--modspotify_main_fg);
}
.alert-info {
background-color: var(--modspotify_miscellaneous_hover_bg);
}
.alert-info .alert-link {
color: var(--modspotify_main_fg);
}
.alert-info .alert-link:hover {
color: var(--modspotify_main_fg);
}
.alert-info::before {
color: var(--modspotify_main_fg);
}
/**
* 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: var(--modspotify_secondary_fg);
text-transform: uppercase;
letter-spacing: 0.16em;
display: inline;
line-height: 1;
color: var(--modspotify_sidebar_and_player_bg);
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 var(--modspotify_sidebar_and_player_bg);
text-align: center;
background-color: var(--modspotify_secondary_fg);
border-radius: 0.25em;
}
.label[href]:hover, .label[href]:focus {
color: var(--modspotify_main_fg);
text-decoration: none;
}
.label[href]:hover, .label[href]:focus {
cursor: pointer;
background-color: #9a9a9a;
}
.label-danger {
background-color: var(--modspotify_miscellaneous_bg);
}
.label-danger[href]:hover, .label-danger[href]:focus {
background-color: #a01422;
}
.label-success {
background-color: var(--modspotify_indicator_fg_and_button_bg);
}
.label-success[href]:hover, .label-success[href]:focus {
background-color: #168d40;
}
.label-warning {
background-color: var(--modspotify_miscellaneous_hover_bg);
}
.label-warning[href]:hover, .label-warning[href]:focus {
background-color: #255fa6;
}
.label-info {
background-color: var(--modspotify_miscellaneous_hover_bg);
}
.label-info[href]:hover, .label-info[href]:focus {
background-color: #255fa6;
}
/**
* Calendar icon
*
* Markup:
*
*
* 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: var(--modspotify_main_fg);
height: 16px;
line-height: 16px;
}
.calendar-icon-month {
background-color: #f80046;
}
.calendar-icon-day {
color: var(--modspotify_sidebar_and_player_bg);
height: 32px;
line-height: 32px;
font-size: 22px;
}
.calendar-icon-day {
background-color: var(--modspotify_main_fg);
}
/**
* 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:
*
*
* .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: var(--modspotify_sidebar_and_player_bg);
border: 2px solid var(--modspotify_slider_bg);
border-radius: 11px;
}
.slider.enabled {
background: var(--modspotify_indicator_fg_and_button_bg);
border-color: transparent;
}
.slider.enabled div {
background: var(--modspotify_main_fg);
}
.slider.enabled div {
left: 15px;
}
.slider div {
height: 22px;
position: absolute;
top: -2px;
width: 22px;
transition: all 0.4s ease;
}
.slider div {
background: var(--modspotify_secondary_fg);
border-radius: inherit;
box-shadow: 0 0 1px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),0.75), 0 0 3px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),0.3);
}
.slider div {
left: -5px;
}
.slider:active div {
width: 26px;
}
.slider:active div {
background: var(--modspotify_main_fg);
}
.slider.enabled:active div {
left: 15px;
}
.slider:hover div {
background: var(--modspotify_main_fg);
}
.slider.disabled {
pointer-events: none;
}
.slider.disabled {
background: var(--modspotify_scrollbar_fg_and_selected_row_bg);
border-color: transparent;
}
.slider.disabled div {
background: var(--modspotify_slider_bg);
box-shadow: none;
}
.slider.disabled:active div {
width: 22px;
}
.slider.disabled:active div {
background: var(--modspotify_slider_bg);
}
.slider.disabled:hover div {
background: var(--modspotify_slider_bg);
}
.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:
*
*
* .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: var(--modspotify_slider_bg);
border-radius: 2px;
margin-top: -2px;
}
.progress-bar .inner {
bottom: 0;
height: inherit;
position: absolute;
}
.progress-bar .inner {
background: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.progress-bar .handle {
display: block;
height: 12px;
opacity: 0;
position: absolute;
top: -4px;
width: 12px;
}
.progress-bar .handle {
background: var(--modspotify_main_fg);
border-radius: 50%;
border: 3px solid var(--modspotify_main_fg);
box-shadow: 0 0 3px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),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: var(--modspotify_main_fg);
}
.progress-bar-wrapper.active .handle {
box-shadow: 0 0 3px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),0.4), inset 2px 2px 3px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),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 var(--modspotify_miscellaneous_hover_bg);
}
.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: var(--modspotify_sidebar_and_player_bg);
}
.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(var(--modspotify_rgb_cover_overlay_and_shadow),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: var(--modspotify_miscellaneous_hover_bg);
}
.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: var(--modspotify_secondary_fg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
width: 32px;
color: var(--modspotify_main_fg);
}
.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: var(--modspotify_main_fg);
}
.card-button-add.contextmenu-active, .card-button-add:not(:disabled):hover {
background-color: transparent;
}
.card-button-add:not(:disabled):hover:active {
color: var(--modspotify_secondary_fg);
}
.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: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.card-button-add.active.contextmenu-active, .card-button-add.active:not(:disabled):hover {
color: var(--modspotify_indicator_fg_and_button_bg);
}
.card-button-add.active:not(:disabled):hover:active {
color: var(--modspotify_selected_button);
}
.card-button-add.drop-target-active {
color: var(--modspotify_sidebar_and_player_bg);
}
.card-button-add.drop-target-active {
background-color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.card-button-add.drop-target-active.contextmenu-active, .card-button-add.drop-target-active:not(:disabled):hover {
color: var(--modspotify_sidebar_and_player_bg);
}
.card-button-add.drop-target-active:not(:disabled):hover:active {
color: var(--modspotify_sidebar_and_player_bg);
}
.card-button-add.drop-target-active.contextmenu-active, .card-button-add.drop-target-active:not(:disabled):hover {
background-color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.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: var(--modspotify_main_fg);
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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
transition-property: transform, box-shadow, color, background-color;
box-shadow: inset 0 0 0 1px var(--modspotify_secondary_fg);
}
.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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
}
.card .card-button-play:not(:disabled):hover:active {
color: var(--modspotify_secondary_fg);
}
.card .card-button-play:not(:disabled):hover:active {
background: rgba(var(--modspotify_rgb_sidebar_and_player_bg),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 var(--modspotify_secondary_fg);
}
.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 var(--modspotify_main_fg), 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 var(--modspotify_main_fg);
}
@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 var(--modspotify_main_fg);
}
.card .card-button-play.contextmenu-active::after, .card .card-button-play:not(:disabled):hover::after {
box-shadow: inset 0 0 0 1px var(--modspotify_main_fg);
}
}
.card .card-button-play:not(:disabled):hover:active {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.card .card-button-play:not(:disabled):hover:active::after {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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(var(--modspotify_rgb_cover_overlay_and_shadow),0.75) !important;
border-color: var(--modspotify_main_fg);
}
.card .card-button-play:active {
color: var(--modspotify_main_bg);
}
.card .card-button-play:active {
background: rgba(var(--modspotify_rgb_cover_overlay_and_shadow),0.75) !important;
border-color: var(--modspotify_main_bg);
}
.card-type-user .card-overlay,
.card-type-user .card-button-play {
display: none;
}
.card-button-more {
top: 50%;
height: 32px;
line-height: 30px;
color: var(--modspotify_secondary_fg);
transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1);
width: 32px;
color: var(--modspotify_main_fg);
}
.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: var(--modspotify_main_fg);
}
.card-button-more.contextmenu-active, .card-button-more:not(:disabled):hover {
background-color: transparent;
}
.card-button-more:not(:disabled):hover:active {
color: var(--modspotify_secondary_fg);
}
.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: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.card-button-more.active.contextmenu-active, .card-button-more.active:not(:disabled):hover {
color: var(--modspotify_indicator_fg_and_button_bg);
}
.card-button-more.active:not(:disabled):hover:active {
color: var(--modspotify_selected_button);
}
.card-button-more.drop-target-active {
color: var(--modspotify_sidebar_and_player_bg);
}
.card-button-more.drop-target-active {
background-color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.card-button-more.drop-target-active.contextmenu-active, .card-button-more.drop-target-active:not(:disabled):hover {
color: var(--modspotify_sidebar_and_player_bg);
}
.card-button-more.drop-target-active:not(:disabled):hover:active {
color: var(--modspotify_sidebar_and_player_bg);
}
.card-button-more.drop-target-active.contextmenu-active, .card-button-more.drop-target-active:not(:disabled):hover {
background-color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.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: var(--modspotify_main_fg);
}
: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: var(--modspotify_slider_bg);
}
.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: var(--modspotify_main_fg);
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: var(--modspotify_main_fg);
}
.card-info-title a:hover:active {
color: var(--modspotify_secondary_fg);
}
.card-info-subtitle-links {
font-size: 14px;
line-height: 20px;
letter-spacing: 0.015em;
font-weight: var(--glue-font-weight-normal);
color: var(--modspotify_secondary_fg);
text-transform: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--modspotify_secondary_fg);
}
.card-info-subtitle-links {
padding-bottom: 3px;
margin-bottom: -3px;
}
.card-info-subtitle-links a {
color: var(--modspotify_secondary_fg);
}
.card-info-subtitle-links a:hover {
color: var(--modspotify_main_fg);
}
.card-info-subtitle-metadata {
font-size: 11px;
line-height: 16px;
letter-spacing: 0.015em;
font-weight: var(--glue-font-weight-normal);
color: var(--modspotify_secondary_fg);
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: var(--modspotify_secondary_fg);
}
.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: var(--modspotify_miscellaneous_hover_bg);
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: var(--modspotify_secondary_fg);
text-transform: none;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow-wrap: break-word;
color: var(--modspotify_secondary_fg);
}
.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: var(--modspotify_indicator_fg_and_button_bg);
}
.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: var(--modspotify_indicator_fg_and_button_bg);
}
.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: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.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: var(--modspotify_sidebar_and_player_bg);
}
.card-horizontal.pressed > .card-horizontal-interior-wrapper, .card-horizontal.contextmenu-active > .card-horizontal-interior-wrapper {
background-color: var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_main_fg);
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: var(--modspotify_main_fg);
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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
transition-property: transform, box-shadow, color, background-color;
box-shadow: inset 0 0 0 1px var(--modspotify_secondary_fg);
}
.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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
}
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active {
color: var(--modspotify_secondary_fg);
}
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active {
background: rgba(var(--modspotify_rgb_sidebar_and_player_bg),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 var(--modspotify_secondary_fg);
}
.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 var(--modspotify_main_fg), 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 var(--modspotify_main_fg);
}
@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 var(--modspotify_main_fg);
}
.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 var(--modspotify_main_fg);
}
}
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.card-horizontal-size-medium .card-button-play:not(:disabled):hover:active::after {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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 var(--modspotify_sidebar_and_player_bg);
}
.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(var(--modspotify_rgb_cover_overlay_and_shadow),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: var(--modspotify_secondary_fg);
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: var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_main_bg);
background-image: linear-gradient(to bottom, transparent, var(--modspotify_main_bg));
}
.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(var(--modspotify_rgb_sidebar_and_player_bg),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, var(--modspotify_main_bg));
}
.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: var(--modspotify_sidebar_and_player_bg);
}
.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, var(--modspotify_sidebar_and_player_bg) 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: var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_sidebar_and_player_bg);
box-shadow: 0 4px 12px 4px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),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(var(--modspotify_rgb_cover_overlay_and_shadow),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: var(--modspotify_secondary_fg);
text-transform: uppercase;
letter-spacing: 0.16em;
line-height: 16px;
height: 22px;
color: var(--modspotify_main_fg);
}
.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: var(--modspotify_main_fg);
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: var(--modspotify_secondary_fg);
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: var(--modspotify_secondary_fg);
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: var(--modspotify_main_fg);
}
.glue-page-header__content .glue-page-header__count-label-link:hover .glue-page-header__count-label-text:active {
color: var(--modspotify_pressing_fg);
}
.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: var(--modspotify_main_fg);
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: var(--modspotify_main_fg);
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: var(--modspotify_secondary_fg);
text-transform: none;
color: var(--modspotify_main_fg);
}
.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: var(--modspotify_secondary_fg);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--modspotify_main_fg);
}
.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: var(--modspotify_sidebar_and_player_bg);
}
.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 var(--modspotify_sidebar_and_player_bg);
}
.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, var(--modspotify_main_bg) 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: var(--modspotify_secondary_fg);
text-transform: uppercase;
letter-spacing: 0.16em;
line-height: 16px;
height: 22px;
color: var(--modspotify_main_fg);
}
.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, var(--modspotify_main_bg) 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(var(--modspotify_sidebar_and_player_bg), var(--modspotify_sidebar_and_player_bg) 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: var(--modspotify_main_bg);
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: var(--modspotify_secondary_fg);
font-size: 11px;
line-height: 16px;
letter-spacing: 0.015em;
font-weight: var(--glue-font-weight-normal);
color: var(--modspotify_secondary_fg);
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: var(--modspotify_main_fg);
text-transform: none;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.h-title {
margin: 0;
}
.h-title a {
color: var(--modspotify_main_fg) !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 var(--modspotify_sidebar_and_player_bg);
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: var(--modspotify_main_bg);
}
.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: var(--modspotify_main_fg);
}
.h-search-wrapper:hover .h-search::placeholder {
color: var(--modspotify_main_fg);
}
.h-search {
width: 100%;
height: 36px;
color: var(--modspotify_main_fg);
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: var(--modspotify_slider_bg);
}
.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: var(--modspotify_main_fg);
}
.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: var(--modspotify_sidebar_and_player_bg);
border-radius: 3px;
padding: 0;
}
.focus .h-search-suggestions {
display: block;
}
.h-search-suggestion {
color: var(--modspotify_secondary_fg);
}
.h-search-suggestion {
border-radius: 3px;
cursor: pointer;
}
.h-search-suggestion {
padding-left: 36px;
padding-right: 10px;
}
.h-search-suggestion:hover {
color: var(--modspotify_main_fg);
}
.h-search-suggestion:hover {
background: var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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: var(--modspotify_sidebar_and_player_bg);
border-bottom: 1px solid var(--modspotify_sidebar_and_player_bg);
}
.header-image::before {
bottom: 0;
content: "";
position: absolute;
top: 0;
}
.header-image::before {
background: rgba(var(--modspotify_rgb_cover_overlay_and_shadow),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: var(--modspotify_main_fg);
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: var(--modspotify_main_fg);
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: var(--modspotify_main_bg);
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 var(--modspotify_sidebar_and_player_bg);
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: var(--modspotify_main_fg);
font-size: 28px;
line-height: 36px;
letter-spacing: -0.005em;
font-weight: var(--glue-font-weight-black);
color: var(--modspotify_main_fg);
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
* .table to any <table>. 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 var(--modspotify_sidebar_and_player_bg);
}
.table tbody > tr:last-child > td {
border-bottom: 1px solid var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_miscellaneous_hover_bg);
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: var(--modspotify_slider_bg);
margin: 0 auto;
}
.trend-mark.trend-up {
color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.trend-mark.trend-down {
color: var(--modspotify_miscellaneous_bg);
}
/*
* 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: var(--modspotify_main_fg);
}
.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: var(--modspotify_slider_bg);
}
.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: var(--modspotify_miscellaneous_hover_bg);
}
.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: var(--modspotify_secondary_fg);
}
.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: var(--modspotify_main_fg);
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: var(--modspotify_slider_bg);
}
/*
* 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(var(--modspotify_rgb_sidebar_and_player_bg),0), var(--modspotify_main_bg));
}
@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: var(--modspotify_main_fg);
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: var(--modspotify_secondary_fg);
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 var(--modspotify_sidebar_and_player_bg);
}
.tl-header th,
.tl-cell {
position: relative;
}
.tl-header th, .tl-cell {
border-top: 1px solid var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_secondary_fg);
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: var(--modspotify_main_bg);
}
.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: var(--modspotify_main_fg);
}
.tl-filter-highlight {
background-color: var(--modspotify_miscellaneous_hover_bg);
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: var(--modspotify_main_fg);
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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
transition-property: transform, box-shadow, color, background-color;
box-shadow: inset 0 0 0 1px var(--modspotify_secondary_fg);
}
.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(var(--modspotify_rgb_sidebar_and_player_bg),0.7);
}
.tl-row .button-play:not(:disabled):hover:active {
color: var(--modspotify_secondary_fg);
}
.tl-row .button-play:not(:disabled):hover:active {
background: rgba(var(--modspotify_rgb_sidebar_and_player_bg),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 var(--modspotify_secondary_fg);
}
.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 var(--modspotify_main_fg), 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 var(--modspotify_main_fg);
}
@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 var(--modspotify_main_fg);
}
.tl-row .button-play.contextmenu-active::after, .tl-row .button-play:not(:disabled):hover::after {
box-shadow: inset 0 0 0 1px var(--modspotify_main_fg);
}
}
.tl-row .button-play:not(:disabled):hover:active {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.tl-row .button-play:not(:disabled):hover:active::after {
box-shadow: inset 0 0 0 1px var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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: var(--modspotify_main_fg);
}
.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: var(--modspotify_miscellaneous_bg);
visibility: visible;
}
.tl-row.current .tl-cell:not(.tl-number),
.tl-row.current .tl-cell a:link,
.tl-row.current .tl-highlight {
color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.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: var(--modspotify_main_bg);
}
.tl-row.selected .tl-cell {
background-color: var(--modspotify_scrollbar_fg_and_selected_row_bg);
border-color: var(--modspotify_main_bg);
}
.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: var(--modspotify_slider_bg) !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: var(--modspotify_slider_bg);
}
.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: var(--modspotify_slider_bg) !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: var(--modspotify_slider_bg);
}
.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: var(--modspotify_main_fg) !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: var(--modspotify_sidebar_indicator_and_hover_button_bg) !important;
}
.tl-row:hover .tl-cell, .tl-row.contextmenu-active .tl-cell {
background: var(--modspotify_sidebar_and_player_bg);
}
.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: var(--modspotify_main_fg);
}
.tl-row:hover.playing .tl-highlight,
.tl-row.contextmenu-active.playing .tl-highlight {
color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.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: var(--modspotify_main_fg);
}
.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: var(--modspotify_main_fg);
}
.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: var(--modspotify_secondary_fg);
}
.tl-row:hover .tl-feedback .button:hover::before,
.tl-row.contextmenu-active .tl-feedback .button:hover::before {
color: var(--modspotify_main_fg);
}
.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: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}
.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: var(--modspotify_secondary_fg) !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: var(--modspotify_slider_bg) !important;
}
.tl-row.selection-focus-touch .tl-more .button {
visibility: visible;
}
.tl-highlight {
color: var(--modspotify_main_fg);
}
.tl-featuring a,
.tl-featuring span {
color: var(--modspotify_secondary_fg);
}
.tl-featuring a:hover,
.tl-featuring span:hover {
color: var(--modspotify_pressing_fg);
}
.tl-status-indicator {
display: inline-block;
width: 10px;
height: 10px;
}
.tl-status-indicator {
border-radius: 50%;
border: 1px solid var(--modspotify_miscellaneous_hover_bg);
}
.tl-status-indicator {
margin-right: 2px;
}
.tl-status-indicator--new {
background-color: var(--modspotify_miscellaneous_hover_bg);
}
.tl-status-indicator--in-progress {
background: linear-gradient(to right, var(--modspotify_miscellaneous_hover_bg) 0%, var(--modspotify_miscellaneous_hover_bg) 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: var(--modspotify_slider_bg);
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 var(--modspotify_scrollbar_fg_and_selected_row_bg);
}
.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: var(--modspotify_indicator_fg_and_button_bg);
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 var(--modspotify_miscellaneous_hover_bg);
}
.tl-attention-highlight.visible {
transition: none;
opacity: 1;
}
th[data-sort]:hover {
color: var(--modspotify_main_fg);
}
.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 var(--modspotify_slider_bg), 8px 0 0 0 var(--modspotify_slider_bg), 12px 0 0 0 var(--modspotify_slider_bg), 16px 0 0 0 var(--modspotify_slider_bg), 20px 0 0 0 var(--modspotify_slider_bg), 24px 0 0 0 var(--modspotify_slider_bg), 28px 0 0 0 var(--modspotify_slider_bg), 32px 0 0 0 var(--modspotify_slider_bg), 36px 0 0 0 var(--modspotify_slider_bg), 40px 0 0 0 var(--modspotify_slider_bg), 44px 0 0 0 var(--modspotify_slider_bg), 48px 0 0 0 var(--modspotify_slider_bg);
}
.pop-meter-overlay::after {
box-shadow: 4px 0 0 0 var(--modspotify_secondary_fg), 8px 0 0 0 var(--modspotify_secondary_fg), 12px 0 0 0 var(--modspotify_secondary_fg), 16px 0 0 0 var(--modspotify_secondary_fg), 20px 0 0 0 var(--modspotify_secondary_fg), 24px 0 0 0 var(--modspotify_secondary_fg), 28px 0 0 0 var(--modspotify_secondary_fg), 32px 0 0 0 var(--modspotify_secondary_fg), 36px 0 0 0 var(--modspotify_secondary_fg), 40px 0 0 0 var(--modspotify_secondary_fg), 44px 0 0 0 var(--modspotify_secondary_fg), 48px 0 0 0 var(--modspotify_secondary_fg);
}
/* 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:
*
*
* .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(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
14% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 11.25px -11.25px 0 white, 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
21% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 15px 0 0 white, 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
28% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 11.25px 11.25px 0 white, 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
35% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 0 15px 0 white, -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
42% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), -11.25px 11.25px 0 white, -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
49% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), -15px 0 0 white, -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
56% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), -11.25px -11.25px 0 var(--modspotify_main_fg);
}
63% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8);
}
70% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6);
}
77% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4);
}
84% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
100% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
}
@keyframes throbber-rtl {
7% {
box-shadow: 0 -15px white, -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
14% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.8), -11.25px -11.25px 0 white, -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
21% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.6), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), -15px 0 0 white, -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
28% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.4), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), -11.25px 11.25px 0 white, 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
35% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 0 15px 0 white, 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
42% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 11.25px 11.25px 0 white, 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
49% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 15px 0 0 white, 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
56% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 11.25px -11.25px 0 var(--modspotify_main_fg);
}
63% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8);
}
70% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6);
}
77% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4);
}
84% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
100% {
box-shadow: 0 -15px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
}
@keyframes throbberLarge-ltr {
7% {
box-shadow: 0 -26px white, 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
14% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 19.5px -19.5px 0 white, 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
21% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 26px 0 0 white, 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
28% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 19.5px 19.5px 0 white, 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
35% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 0 26px 0 white, -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
42% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), -19.5px 19.5px 0 white, -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
49% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), -26px 0 0 white, -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
56% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), -19.5px -19.5px 0 var(--modspotify_main_fg);
}
63% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8);
}
70% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6);
}
77% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4);
}
84% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
100% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
}
@keyframes throbberLarge-rtl {
7% {
box-shadow: 0 -26px white, -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
14% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.8), -19.5px -19.5px 0 white, -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
21% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.6), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), -26px 0 0 white, -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
28% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.4), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), -19.5px 19.5px 0 white, 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
35% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 0 26px 0 white, 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
42% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 19.5px 19.5px 0 white, 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
49% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 26px 0 0 white, 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
56% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8), 19.5px -19.5px 0 var(--modspotify_main_fg);
}
63% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.8);
}
70% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.6);
}
77% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.4);
}
84% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2);
}
100% {
box-shadow: 0 -26px rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),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(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 15px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px 11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -15px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -11.25px -11.25px 0 rgba(var(--modspotify_rgb_pressing_button_fg),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(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),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:
*
*
* 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(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), 0 26px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px 19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -26px 0 0 rgba(var(--modspotify_rgb_pressing_button_fg),0.2), -19.5px -19.5px 0 rgba(var(--modspotify_rgb_pressing_button_fg),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. See demo!
*
* 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(var(--modspotify_rgb_cover_overlay_and_shadow),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: var(--modspotify_main_fg);
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: var(--modspotify_sidebar_and_player_bg) !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: var(--modspotify_main_fg);
}
.interaction-debug .key-value-pair span {
color: #f00;
}
.interaction-debug .debug-section {
margin-top: 40px;
}