Created
July 4, 2018 04:25
-
-
Save cuuupid/f79015da27940ae216ab924e4080a111 to your computer and use it in GitHub Desktop.
Spotify glue.css Stylesheet for Customizing Color Scheme
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "UTF-8"; | |
| /* | |
| GLUE Tokens - DLS | |
| The contents of this file is owned and generated by the DLS team. | |
| If you require changes making to the values stored here please reach out | |
| to @dls on Slack. | |
| Links: | |
| - Source: https://ghe.spotify.net/design/glue-tokens | |
| - Documentation: https://ghe.spotify.net/design/glue-tokens | |
| Tack! | |
| The DLS Team | |
| */ | |
| /** | |
| * Spoticons | |
| * | |
| * Variable Set: Spoticons | |
| * | |
| * Styleguide 1.2.1 | |
| */ | |
| /** | |
| * 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 | |
| */ | |
| /*! 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%; } | |
| [dir] body { | |
| margin: 0; } | |
| a:focus { | |
| outline: none; } | |
| a:active, | |
| a:hover { | |
| outline: 0; } | |
| h1 { | |
| font-size: 2em; } | |
| [dir] h1 { | |
| margin: 0.67em 0; } | |
| [dir] abbr[title] { | |
| border-bottom: 1px dotted; } | |
| b, | |
| strong { | |
| font-weight: 400; } | |
| dfn { | |
| font-style: italic; } | |
| hr { | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| height: 0; } | |
| mark { | |
| color: #4c3337; } | |
| [dir] mark { | |
| background: #ff0; } | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| font-family: monospace, serif; | |
| font-size: 1em; } | |
| [dir] code, [dir] kbd, [dir] pre, [dir] samp { | |
| margin: 0; } | |
| pre { | |
| white-space: pre-wrap; } | |
| q { | |
| quotes: "\201C" "\201D" "\2018" "\2019"; } | |
| 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; } | |
| [dir] img { | |
| border: 0; } | |
| svg:not(:root) { | |
| overflow: hidden; } | |
| [dir] figure { | |
| margin: 0; } | |
| [dir] fieldset { | |
| border: 1px solid #c0c0c0; | |
| margin: 0 2px; | |
| padding: 0.35em 0.625em 0.75em; } | |
| [dir] legend { | |
| border: 0; | |
| padding: 0; } | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-family: inherit; | |
| font-size: 100%; } | |
| [dir] button, [dir] input, [dir] select, [dir] 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; } | |
| [dir] input[type="checkbox"], [dir] 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; } | |
| [dir] button::-moz-focus-inner, [dir] 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://d2j0f09xqmv212.cloudfront.net/fonts/CircularSpUIv3T-Light.ttf") format("truetype"); | |
| font-weight: 200; | |
| font-style: normal; } | |
| @font-face { | |
| font-family: 'spotify-circular'; | |
| src: url("https://d2j0f09xqmv212.cloudfront.net/fonts/CircularSpUIv3T-Book.ttf") format("truetype"); | |
| font-weight: 400; | |
| font-style: normal; } | |
| @font-face { | |
| font-family: 'spotify-circular'; | |
| src: url("https://d2j0f09xqmv212.cloudfront.net/fonts/CircularSpUIv3T-Bold.ttf") format("truetype"); | |
| font-weight: 600; | |
| 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); } } | |
| /** | |
| * Typography | |
| * | |
| * Please consider typographic consistency when you create new elements. | |
| * 99.99% of all type elements should be covered by some combination of the classes below: | |
| * | |
| * - Headers (`h1`-`h5`) | |
| * - Standard body/paragraph text | |
| * - Standard tags: `code`<br> | |
| * <span class="text-warning">`strong`, `em` and `small` are NOT SUGGESTED OR SUPPORTED.</span> | |
| * - Standard classes: `lead`, `text-muted`, `text-warning`, `text-danger`, and `text-success` | |
| * - Article classes (used on biograph or reviews where readability is more important): `article-text`. | |
| * | |
| * The css attributes that you should most certainly not override are: | |
| * | |
| * - `font-family` | |
| * - `font-size` | |
| * - `color` | |
| * - `line-height` | |
| * - `font-weight` | |
| * - `letter-spacing` | |
| * | |
| * If you feel like you need to do something that cannot be done with some combination of these options, please reach out to the design team to see if we should include it in GLUE. | |
| * | |
| * Styleguide 20.1 | |
| */ | |
| /** | |
| * Links | |
| * | |
| * Text links should be underlined on hover. However. Regular text underlining | |
| * is ugly so the underline is accomplished with a `border-bottom`. This means | |
| * that text links cannot have `display: block;` If you need them to behave like | |
| * a block, you must wrap them. | |
| * | |
| * <span class="text-warning">If you want a link that isn't text related, just | |
| * override the bottom border.</span> | |
| * | |
| * Markup: <!-- Correct --> | |
| * <div style="max-width: 200px"><a href="#">A link like a block of text. Hooray!</a></div> | |
| * <!-- Incorrect --> | |
| * <a style="display: block; max-width: 200px" href="#">A link styled like a block. This is just totally wrong. Boo!</a> | |
| * | |
| * Styleguide 20.1.1 | |
| */ | |
| /** | |
| * Body Text | |
| * | |
| * This is standard text. | |
| * | |
| * Markup: <p class="{$modifiers}">To be, or not to be, that is the <a href="#">question</a>: Whether 'tis Nobler in the mind to suffer The Slings and Arrows of outrageous Fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep No more; and by a sleep, to say we end The Heart-ache, and the thousand Natural shocks That Flesh is heir to? 'Tis a consummation Devoutly to be wished. To die, to sleep, To sleep, perchance to Dream; Aye, there's the rub.</p> | |
| * | |
| * .lead - Used for a leading paragraph. | |
| * | |
| * Styleguide 20.1.2 | |
| */ | |
| [dir] p { | |
| margin: 0 0 10px; | |
| cursor: default; } | |
| .lead { | |
| font-size: 18px; | |
| line-height: 24px; } | |
| [dir] .lead { | |
| margin-bottom: 20px; } | |
| small, | |
| .small { | |
| font-size: 100%; } | |
| strong, | |
| .strong { | |
| font-weight: 400; } | |
| em, | |
| .em { | |
| font-style: normal; } | |
| cite { | |
| font-style: normal; } | |
| /** | |
| * Article Text | |
| * | |
| * This is standard text for article pages like reviews or bios. | |
| * | |
| * Markup: <div class="article-text"> | |
| * <p class="{$modifiers}">To be, or not to be, that is the <a href="#">question</a>: Whether 'tis Nobler in the mind to suffer The Slings and Arrows of outrageous Fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep No more; and by a sleep, to say we end The Heart-ache, and the thousand Natural shocks That Flesh is heir to? 'Tis a consummation Devoutly to be wished. To die, to sleep, To sleep, perchance to Dream; Aye, there's the rub.</p> | |
| * </div> | |
| * | |
| * .lead - Used for a leading paragraph. | |
| * | |
| * Styleguide 20.1.3 | |
| */ | |
| .article-text p { | |
| font-size: 18px; | |
| line-height: 24px; } | |
| [dir] .article-text p { | |
| margin: 0 0 12px; } | |
| .article-text .lead { | |
| font-size: 28px; | |
| line-height: 36px; } | |
| [dir] .article-text .lead { | |
| margin-bottom: 24px; } | |
| /** | |
| * Text modifiers | |
| * | |
| * Markup: | |
| * <p class="{$modifiers}">Some short text with <a href="#">a link</a> inside</p> | |
| * <a class="{$modifiers}" href="#">Some link</a> | |
| * | |
| * .text-secondary - Secondary text - this modifies ONLY LINKS! | |
| * .text-meta - Meta text | |
| * .text-nav - Nav text | |
| * .text-muted - Muted text | |
| * .text-warning - Warning text | |
| * .text-danger - Danger text | |
| * .text-success - Success text | |
| * .inverted-text - Inverted text | |
| * | |
| * Styleguide 20.1.4 | |
| */ | |
| .text-secondary a, | |
| a.text-secondary { | |
| color: #b3b3b3; } | |
| a.text-secondary:hover, | |
| .text-secondary a:hover, | |
| a.text-secondary:focus, | |
| .text-secondary a:focus { | |
| color: #e6e6e6; } | |
| .text-meta { | |
| font-size: 11px; | |
| line-height: 16px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; } | |
| .text-nav { | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; | |
| font-size: 14px; } | |
| .text-muted { | |
| color: #b3b3b3; } | |
| .text-muted a, | |
| a.text-muted { | |
| color: #b3b3b3; } | |
| a.text-muted:hover, | |
| .text-muted a:hover, | |
| a.text-muted:focus, | |
| .text-muted a:focus { | |
| color: #cdcdcd; } | |
| .text-warning { | |
| color: #ffffff; } | |
| .text-warning a, | |
| a.text-warning { | |
| color: #ffffff; } | |
| a.text-warning:hover, | |
| .text-warning a:hover, | |
| a.text-warning:focus, | |
| .text-warning a:focus { | |
| color: #ffffff; } | |
| .text-danger { | |
| color: #cd1a2b; } | |
| .text-danger a, | |
| a.text-danger { | |
| color: #eb626f; } | |
| a.text-danger:hover, | |
| .text-danger a:hover, | |
| a.text-danger:focus, | |
| .text-danger a:focus { | |
| color: #f18f98; } | |
| .text-success { | |
| color: #1ed760; } | |
| .text-success a, | |
| a.text-success { | |
| color: #70eb9c; } | |
| a.text-success:hover, | |
| .text-success a:hover, | |
| a.text-success:focus, | |
| .text-success a:focus { | |
| color: #9df1bb; } | |
| .inverted-text { | |
| color: #614348; | |
| -webkit-font-smoothing: antialiased; } | |
| .inverted-text a { | |
| color: #614348; } | |
| .inverted-text a:hover { | |
| color: #4c3337; } | |
| /** | |
| * Alignment classes | |
| * | |
| * Markup: | |
| * <p class="{$modifiers}">Some short text that is aligned</p> | |
| * | |
| * .text-left - Left aligned text | |
| * .text-right - Right aligned text | |
| * .text-center - Centered text | |
| * | |
| * Styleguide 20.1.5 | |
| */ | |
| [dir=ltr] .text-left { | |
| text-align: left; } | |
| [dir=rtl] .text-left { | |
| text-align: right; } | |
| [dir=ltr] .text-right { | |
| text-align: right; } | |
| [dir=rtl] .text-right { | |
| text-align: left; } | |
| [dir] .text-center { | |
| text-align: center; } | |
| /** | |
| * Truncating too long text | |
| * | |
| * Markup: | |
| * <p class="one-line">Stand in front of the computer screen give attitude so intently stare at the same spot under the bed, make muffins hopped up on goofballs under the bed. Play time claw drapes throwup on your pillow yet burrow under covers yet nap all day climb leg, destroy couch. Stick butt in face chew iPad power cord rub face on everything yet leave dead animals as gifts chew iPad power cord or chase imaginary bugs or lick butt. Intently stare at the same spot. </p> | |
| * | |
| * Styleguide 20.1.6 | |
| */ | |
| .one-line { | |
| display: block; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| /** | |
| * Headings | |
| * | |
| * Styleguide 20.2 | |
| */ | |
| /** | |
| * Default headings | |
| * | |
| * All HTML headings, `<h1>` through `<h5>` are available. | |
| * | |
| * Markup: | |
| * <h1>I am Cat heading h1</h1> | |
| * <h2>I am Cat heading h2</h2> | |
| * <h3>I am Cat heading h3</h3> | |
| * <h4>I am Cat heading h4</h4> | |
| * <h5>I am Cat heading h5</h5> | |
| * | |
| * Styleguide 20.2.1 | |
| */ | |
| /** | |
| * Headings class names | |
| * | |
| * Changed header class names to be less tied to a specific element and more tied to a style/size. | |
| * | |
| * Markup: | |
| * <div class="hdr-xxl">I am a cat heading!</div> | |
| * <div class="hdr-xl">I am a cat heading!</div> | |
| * <div class="hdr-l">I am a cat heading!</div> | |
| * <div class="hdr-m">I am a cat heading!</div> | |
| * <div class="hdr-sm">I am a cat heading!</div> | |
| * <div class="hdr-xsm">I am a cat heading!</div> | |
| * | |
| * Styleguide 20.2.2 | |
| */ | |
| /** | |
| * Multi-line headings | |
| * | |
| * Markup: | |
| * <h1>This is a super long heading that will wrap in any situation you can be sure of that. It just goes on and on and on. Its sooooo absurd.</h1> | |
| * <h2>This is a super long heading that will wrap in any situation you can be sure of that. It just goes on and on and on. Its sooooo absurd.</h2> | |
| * <h3>This is a super long heading that will wrap in any situation you can be sure of that. It just goes on and on and on. Its sooooo absurd.</h3> | |
| * <h4>This is a super long heading that will wrap in any situation you can be sure of that. It just goes on and on and on. Its sooooo absurd.</h4> | |
| * <h5>This is a super long heading that will wrap in any situation you can be sure of that. It just goes on and on and on. Its sooooo absurd.</h5> | |
| * | |
| * Styleguide 20.2.3 | |
| */ | |
| .hdr-xxl, | |
| .hdr-xl, | |
| .hdr-l, | |
| .hdr-m, | |
| .hdr-sm, | |
| .hdr-xsm, | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5 { | |
| color: #ffffff; } | |
| [dir] .hdr-xxl, [dir] .hdr-xl, [dir] .hdr-l, [dir] .hdr-m, [dir] .hdr-sm, [dir] .hdr-xsm, [dir] h1, [dir] h2, [dir] h3, [dir] h4, [dir] h5 { | |
| cursor: default; } | |
| .hdr-xxl a, | |
| .hdr-xl a, | |
| .hdr-l a, | |
| .hdr-m a, | |
| .hdr-sm a, | |
| .hdr-xsm a, | |
| h1 a, | |
| h2 a, | |
| h3 a, | |
| h4 a, | |
| h5 a { | |
| color: #ffffff; } | |
| [dir] .hdr-xxl, [dir] .hdr-xl, [dir] .hdr-l, [dir] h1, [dir] h2, [dir] h3 { | |
| margin-top: 20px; | |
| margin-bottom: 10px; } | |
| [dir] .hdr-m, [dir] .hdr-sm, [dir] h4, [dir] h5 { | |
| margin-top: 10px; | |
| margin-bottom: 10px; } | |
| h1, | |
| .hdr-xxl { | |
| font-size: 48px; | |
| line-height: 56px; | |
| letter-spacing: -0.005em; | |
| font-weight: 600; | |
| color: #ffffff; | |
| text-transform: none; } | |
| h2, | |
| .hdr-xl { | |
| font-size: 36px; | |
| line-height: 44px; | |
| letter-spacing: -0.005em; | |
| font-weight: 600; | |
| color: #ffffff; | |
| text-transform: none; } | |
| h3, | |
| .hdr-l { | |
| font-size: 28px; | |
| line-height: 36px; | |
| letter-spacing: -0.005em; | |
| font-weight: 600; | |
| color: #ffffff; | |
| text-transform: none; } | |
| h4, | |
| .hdr-m { | |
| font-size: 18px; | |
| line-height: 24px; | |
| letter-spacing: -0.005em; | |
| font-weight: 600; | |
| color: #ffffff; | |
| text-transform: none; } | |
| h5, | |
| .hdr-sm { | |
| font-size: 14px; | |
| line-height: 20px; | |
| letter-spacing: 0.015em; | |
| font-weight: 400; | |
| color: #ffffff; | |
| text-transform: none; } | |
| .hdr-m small, | |
| .hdr-m .small, | |
| .hdr-sm small, | |
| .hdr-sm .small, | |
| h4 small, | |
| h4 .small, | |
| h5 small, | |
| h5 .small { | |
| font-size: 12px; } | |
| /** | |
| * Lists | |
| * | |
| * Styleguide 20.4 | |
| */ | |
| /** | |
| * Unordered lists | |
| * | |
| * Markup: | |
| * <ul class="{$modifiers}"> | |
| * <li>Item 1</li> | |
| * <li>Item 2</li> | |
| * <li>Item 3</li> | |
| * </ul> | |
| * | |
| * .list-unstyled - Unstyled keeps list items block level, just removes default browser padding and list-style | |
| * .list-inline - Inline turns list items into inline-block | |
| * | |
| * Styleguide 20.4.1 | |
| */ | |
| /** | |
| * Ordered lists | |
| * | |
| * Markup: | |
| * <ol> | |
| * <li>Item 1</li> | |
| * <li>Item 2</li> | |
| * <li>Item 3</li> | |
| * </ol> | |
| * | |
| * Styleguide 20.4.2 | |
| */ | |
| /** | |
| * Nested lists | |
| * | |
| * Markup: | |
| * <ol> | |
| * <li> | |
| * Item 1 | |
| * <ul> | |
| * <li>Nested item 1</li> | |
| * <li>Nested item 2</li> | |
| * <li>Nested item 3</li> | |
| * </ul> | |
| * </li> | |
| * <li>Item 2</li> | |
| * <li>Item 3</li> | |
| * </ol> | |
| * | |
| * Styleguide 20.4.2 | |
| */ | |
| [dir] ul, [dir] ol { | |
| margin-top: 0; | |
| margin-bottom: 10px; } | |
| [dir] ul ul, [dir] ul ol, [dir] ol ol, [dir] ol ul { | |
| margin-bottom: 0; } | |
| .list-unstyled { | |
| list-style: none; } | |
| [dir=ltr] .list-unstyled { | |
| padding-left: 0; } | |
| [dir=rtl] .list-unstyled { | |
| padding-right: 0; } | |
| .list-inline { | |
| list-style: none; } | |
| [dir=ltr] .list-inline { | |
| padding-left: 0; } | |
| [dir=rtl] .list-inline { | |
| padding-right: 0; } | |
| .list-inline > li { | |
| display: inline-block; } | |
| [dir=ltr] .list-inline > li { | |
| padding-left: 5px; | |
| padding-right: 5px; } | |
| [dir=rtl] .list-inline > li { | |
| padding-right: 5px; | |
| padding-left: 5px; } | |
| /** | |
| * Description Lists | |
| * | |
| * Markup: | |
| * <dl class="{$modifiers}"> | |
| * <dt>Description lists</dt> | |
| * <dd>A description list is perfect for defining terms.</dd> | |
| * <dt>Euismod</dt> | |
| * <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> | |
| * <dd>Donec id elit non mi porta gravida at eget metus.</dd> | |
| * </dl> | |
| * | |
| * .dl-horizontal - Horizontal layout | |
| * | |
| * Styleguide 20.4.3 | |
| */ | |
| [dir] dl { | |
| margin-bottom: 20px; } | |
| dt, | |
| dd { | |
| line-height: 20px; } | |
| [dir=ltr] dd { | |
| margin-left: 10px; } | |
| [dir=rtl] dd { | |
| margin-right: 10px; } | |
| .dl-horizontal dt { | |
| width: 160px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| [dir=ltr] .dl-horizontal dt { | |
| float: left; | |
| clear: left; | |
| text-align: right; } | |
| [dir=rtl] .dl-horizontal dt { | |
| float: right; | |
| clear: right; | |
| text-align: left; } | |
| [dir=ltr] .dl-horizontal dd { | |
| margin-left: 180px; } | |
| [dir=rtl] .dl-horizontal dd { | |
| margin-right: 180px; } | |
| .dl-horizontal dd::after { | |
| content: ""; | |
| display: table; } | |
| [dir] .dl-horizontal dd::after { | |
| clear: both; } | |
| .dl-horizontal.dl-wide dt { | |
| width: 250px; } | |
| [dir=ltr] .dl-horizontal.dl-wide dd { | |
| margin-left: 270px; } | |
| [dir=rtl] .dl-horizontal.dl-wide dd { | |
| margin-right: 270px; } | |
| /** | |
| * Miscellaneous | |
| * | |
| * Styleguide 20.9 | |
| */ | |
| /** | |
| * Abbreviations and acronyms | |
| * | |
| * Markup: <p>An abbreviation of the word attribute is <abbr title="attribute" class="{$modifiers}">attr</abbr>.</p> | |
| * | |
| * .initialism - Uppercase and slightly smaller font-size | |
| * | |
| * Styleguide 20.9.1 | |
| */ | |
| [dir] abbr[title], [dir] abbr[data-original-title] { | |
| cursor: help; | |
| border-bottom: 1px dotted #b3b3b3; } | |
| abbr.initialism { | |
| font-size: 90%; | |
| text-transform: uppercase; } | |
| /** | |
| * Blockquotes | |
| * | |
| * Markup: | |
| * <blockquote class="{$modifiers}"> | |
| * <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
| * <small>Someone famous in <cite title="Source Title">Source Title</cite></small> | |
| * </blockquote> | |
| * | |
| * .pull-right - right-aligned blockquote | |
| * | |
| * Styleguide 20.9.2 | |
| */ | |
| blockquote, | |
| .blockquote { | |
| line-height: 1.25; } | |
| [dir] blockquote, [dir] .blockquote { | |
| padding: 10px 20px; | |
| margin: 0 0 13.6px; } | |
| [dir=ltr] blockquote, [dir=ltr] .blockquote { | |
| border-left: 3px solid #614348; } | |
| [dir=rtl] blockquote, [dir=rtl] .blockquote { | |
| border-right: 3px solid #614348; } | |
| blockquote small, | |
| blockquote .small, | |
| .blockquote small, | |
| .blockquote .small { | |
| display: block; | |
| line-height: 20px; | |
| color: #b3b3b3; } | |
| blockquote small::before, | |
| blockquote .small::before, | |
| .blockquote small::before, | |
| .blockquote .small::before { | |
| content: '\2014 \00A0'; } | |
| [dir=ltr] blockquote.pull-right, [dir=ltr] .blockquote.pull-right { | |
| float: right; | |
| padding-right: 15px; | |
| padding-left: 0; | |
| border-right: 5px solid #614348; | |
| border-left: 0; } | |
| [dir=rtl] blockquote.pull-right, [dir=rtl] .blockquote.pull-right { | |
| float: left; | |
| padding-left: 15px; | |
| padding-right: 0; | |
| border-left: 5px solid #614348; | |
| border-right: 0; } | |
| [dir=ltr] blockquote.pull-right p, [dir=ltr] blockquote.pull-right small, [dir=ltr] blockquote.pull-right .small, [dir=ltr] .blockquote.pull-right p, [dir=ltr] .blockquote.pull-right small, [dir=ltr] .blockquote.pull-right .small { | |
| text-align: right; } | |
| [dir=rtl] blockquote.pull-right p, [dir=rtl] blockquote.pull-right small, [dir=rtl] blockquote.pull-right .small, [dir=rtl] .blockquote.pull-right p, [dir=rtl] .blockquote.pull-right small, [dir=rtl] .blockquote.pull-right .small { | |
| text-align: left; } | |
| blockquote.pull-right small::before, | |
| blockquote.pull-right .small::before, | |
| .blockquote.pull-right small::before, | |
| .blockquote.pull-right .small::before { | |
| content: ''; } | |
| blockquote.pull-right small::after, | |
| blockquote.pull-right .small::after, | |
| .blockquote.pull-right small::after, | |
| .blockquote.pull-right .small::after { | |
| content: '\00A0 \2014'; } | |
| q::before, | |
| q::after, | |
| blockquote::before, | |
| blockquote::after { | |
| content: ""; } | |
| /** | |
| * Addresses | |
| * | |
| * Markup: | |
| * <address> | |
| * <strong>Spotify AB</strong><br> | |
| * Birger Jarlsgatan 61<br> | |
| * 113 56 Stockholm<br> | |
| * <abbr title="Phone">P:</abbr> (123) 456-7890 | |
| * </address> | |
| * <address> | |
| * <strong>Full Name</strong><br> | |
| * <a href="mailto:#">first.last$example.com</a> | |
| * </address> | |
| * | |
| * Styleguide 20.9.4 | |
| */ | |
| address { | |
| display: block; | |
| font-style: normal; | |
| line-height: 20px; } | |
| [dir] address { | |
| margin-bottom: 20px; } | |
| /** | |
| * Forms | |
| */ | |
| input, | |
| textarea { | |
| font-weight: 200; } | |
| * { | |
| box-sizing: border-box; } | |
| html { | |
| font-size: 62.5%; | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| color: #b3b3b3; | |
| font-family: "spotify-circular", "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic Pro", "Meiryo", "MS Gothic", sans-serif; } | |
| html:lang(zh-Hant) { | |
| font-family: "spotify-circular", "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", "PingFang TC", "Lantinghei TC", "Hiragino Kaku Gothic Pro", "Meiryo", "MS Gothic", sans-serif; } | |
| html:lang(vi) { | |
| font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", "PingFang TC", "Lantinghei TC", "Hiragino Kaku Gothic Pro", "Meiryo", "MS Gothic", sans-serif; } | |
| body { | |
| overflow-x: hidden; | |
| overflow-y: overlay; | |
| font-size: 14px; | |
| line-height: 20px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: none; | |
| color: #b3b3b3; | |
| position: relative; | |
| width: 100vw; | |
| min-height: 100vh; | |
| -webkit-touch-callout: none; | |
| user-select: none; } | |
| [dir] body { | |
| cursor: default; | |
| background-color: #614348; } | |
| body.disable-pointer-events { | |
| pointer-events: none; } | |
| .selectable { | |
| -webkit-touch-callout: default; | |
| user-select: text; } | |
| [dir] .selectable { | |
| cursor: text; } | |
| input, | |
| button, | |
| select, | |
| textarea { | |
| font-family: inherit; | |
| font-size: inherit; | |
| line-height: inherit; } | |
| a { | |
| color: #ffffff; | |
| text-decoration: none; } | |
| [dir] a { | |
| cursor: pointer; | |
| border-bottom: 1px solid transparent; } | |
| a:hover:not(.button), | |
| a:focus:not(.button), | |
| a.contextmenu-active:not(.button) { | |
| color: white; | |
| text-decoration: none; } | |
| [dir] a:hover:not(.button), [dir] a:focus:not(.button), [dir] a.contextmenu-active:not(.button) { | |
| border-bottom-color: currentcolor; } | |
| a:hover:not(.button):active, | |
| a:focus:not(.button):active, | |
| a.contextmenu-active:not(.button):active { | |
| color: #d9d9d9; } | |
| [dir] a:active { | |
| background-color: transparent; } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| vertical-align: middle; } | |
| .sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); } | |
| [dir] .sr-only { | |
| margin: -1px; | |
| padding: 0; | |
| border: 0; } | |
| /** | |
| * 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; } | |
| [dir=ltr] .container { | |
| margin-right: auto; | |
| margin-left: auto; | |
| padding-left: 32px; | |
| padding-right: 32px; } | |
| [dir=rtl] .container { | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-right: 32px; | |
| padding-left: 32px; } | |
| .container::after { | |
| content: ""; | |
| display: table; } | |
| [dir] .container::after { | |
| clear: both; } | |
| [dir=ltr] .scrollbar-style-visible-mac .container, [dir=ltr] .scrollbar-style-visible-windows .container { | |
| padding-right: 48px; } | |
| [dir=rtl] .scrollbar-style-visible-mac .container, [dir=rtl] .scrollbar-style-visible-windows .container { | |
| padding-left: 48px; } | |
| [dir=ltr] .row { | |
| margin-left: -8px; | |
| margin-right: -8px; } | |
| [dir=rtl] .row { | |
| margin-right: -8px; | |
| margin-left: -8px; } | |
| .row::after { | |
| content: ""; | |
| display: table; } | |
| [dir] .row::after { | |
| clear: both; } | |
| [dir=ltr] .row .row { | |
| margin-left: -8px; | |
| margin-right: -8px; } | |
| [dir=rtl] .row .row { | |
| margin-right: -8px; | |
| margin-left: -8px; } | |
| @media (min-width: 592px) { | |
| [dir=ltr] .row { | |
| margin-left: -8px; | |
| margin-right: -8px; } | |
| [dir=rtl] .row { | |
| margin-right: -8px; | |
| margin-left: -8px; } | |
| [dir=ltr] .row .row { | |
| margin-left: -8px; | |
| margin-right: -8px; } | |
| [dir=rtl] .row .row { | |
| margin-right: -8px; | |
| margin-left: -8px; } } | |
| @media (min-width: 820px) { | |
| [dir=ltr] .row { | |
| margin-left: -10px; | |
| margin-right: -10px; } | |
| [dir=rtl] .row { | |
| margin-right: -10px; | |
| margin-left: -10px; } | |
| [dir=ltr] .row .row { | |
| margin-left: -10px; | |
| margin-right: -10px; } | |
| [dir=rtl] .row .row { | |
| margin-right: -10px; | |
| margin-left: -10px; } } | |
| @media (min-width: 1280px) { | |
| [dir=ltr] .row { | |
| margin-left: -12px; | |
| margin-right: -12px; } | |
| [dir=rtl] .row { | |
| margin-right: -12px; | |
| margin-left: -12px; } | |
| [dir=ltr] .row .row { | |
| margin-left: -12px; | |
| margin-right: -12px; } | |
| [dir=rtl] .row .row { | |
| margin-right: -12px; | |
| margin-left: -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; } | |
| [dir=ltr] .col-xs-1, [dir=ltr] .col-xs-2, [dir=ltr] .col-xs-3, [dir=ltr] .col-xs-4, [dir=ltr] .col-xs-5, [dir=ltr] .col-xs-6, [dir=ltr] .col-xs-7, [dir=ltr] .col-xs-8, [dir=ltr] .col-xs-9, [dir=ltr] .col-xs-10, [dir=ltr] .col-xs-11, [dir=ltr] .col-xs-12, [dir=ltr] .col-sm-1, [dir=ltr] .col-sm-2, [dir=ltr] .col-sm-3, [dir=ltr] .col-sm-4, [dir=ltr] .col-sm-5, [dir=ltr] .col-sm-6, [dir=ltr] .col-sm-7, [dir=ltr] .col-sm-8, [dir=ltr] .col-sm-9, [dir=ltr] .col-sm-10, [dir=ltr] .col-sm-11, [dir=ltr] .col-sm-12, [dir=ltr] .col-md-1, [dir=ltr] .col-md-2, [dir=ltr] .col-md-3, [dir=ltr] .col-md-4, [dir=ltr] .col-md-5, [dir=ltr] .col-md-6, [dir=ltr] .col-md-7, [dir=ltr] .col-md-8, [dir=ltr] .col-md-9, [dir=ltr] .col-md-10, [dir=ltr] .col-md-11, [dir=ltr] .col-md-12, [dir=ltr] .col-lg-1, [dir=ltr] .col-lg-2, [dir=ltr] .col-lg-3, [dir=ltr] .col-lg-4, [dir=ltr] .col-lg-5, [dir=ltr] .col-lg-6, [dir=ltr] .col-lg-7, [dir=ltr] .col-lg-8, [dir=ltr] .col-lg-9, [dir=ltr] .col-lg-10, [dir=ltr] .col-lg-11, [dir=ltr] .col-lg-12 { | |
| padding-left: 8px; | |
| padding-right: 8px; } | |
| [dir=rtl] .col-xs-1, [dir=rtl] .col-xs-2, [dir=rtl] .col-xs-3, [dir=rtl] .col-xs-4, [dir=rtl] .col-xs-5, [dir=rtl] .col-xs-6, [dir=rtl] .col-xs-7, [dir=rtl] .col-xs-8, [dir=rtl] .col-xs-9, [dir=rtl] .col-xs-10, [dir=rtl] .col-xs-11, [dir=rtl] .col-xs-12, [dir=rtl] .col-sm-1, [dir=rtl] .col-sm-2, [dir=rtl] .col-sm-3, [dir=rtl] .col-sm-4, [dir=rtl] .col-sm-5, [dir=rtl] .col-sm-6, [dir=rtl] .col-sm-7, [dir=rtl] .col-sm-8, [dir=rtl] .col-sm-9, [dir=rtl] .col-sm-10, [dir=rtl] .col-sm-11, [dir=rtl] .col-sm-12, [dir=rtl] .col-md-1, [dir=rtl] .col-md-2, [dir=rtl] .col-md-3, [dir=rtl] .col-md-4, [dir=rtl] .col-md-5, [dir=rtl] .col-md-6, [dir=rtl] .col-md-7, [dir=rtl] .col-md-8, [dir=rtl] .col-md-9, [dir=rtl] .col-md-10, [dir=rtl] .col-md-11, [dir=rtl] .col-md-12, [dir=rtl] .col-lg-1, [dir=rtl] .col-lg-2, [dir=rtl] .col-lg-3, [dir=rtl] .col-lg-4, [dir=rtl] .col-lg-5, [dir=rtl] .col-lg-6, [dir=rtl] .col-lg-7, [dir=rtl] .col-lg-8, [dir=rtl] .col-lg-9, [dir=rtl] .col-lg-10, [dir=rtl] .col-lg-11, [dir=rtl] .col-lg-12 { | |
| padding-right: 8px; | |
| padding-left: 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`). | |
| * | |
| * <span class="text-warning">NOTE: Max item clamp is 18</span> | |
| * | |
| * Markup: <div class="row clamp-sm-2 clamp-md-3 clamp-lg-4 grid-demo"> | |
| * <div class="col-sm-6 col-md-4 col-lg-3"> | |
| * <div class="text-center">Item 1</div> | |
| * </div> | |
| * <div class="col-sm-6 col-md-4 col-lg-3"> | |
| * <div class="text-center">Item 2</div> | |
| * </div> | |
| * <div class="col-sm-6 col-md-4 col-lg-3"> | |
| * <div class="text-center">Item 3</div> | |
| * </div> | |
| * <div class="col-sm-6 col-md-4 col-lg-3"> | |
| * <div class="text-center">Item 4</div> | |
| * </div> | |
| * <div class="col-sm-6 col-md-4 col-lg-3"> | |
| * <div class="text-center">Item 5</div> | |
| * </div> | |
| * </div> | |
| * | |
| * | |
| * Styleguide 10.1.2 | |
| */ | |
| /** | |
| * Grid Gutters | |
| * | |
| * The `.col-*` classes give a gutter horizontally, but not vertically. | |
| * If you want an equal vertical gutter, usually because the elements are in | |
| * a grid, add `.standard-grid` to the containing element (usually a `.row`). | |
| * | |
| * Markup: <div class="row standard-grid clamp-sm-4 clamp-md-6 clamp-lg-8 grid-demo"> | |
| * <div class="col-sm-6 col-md-4 col-lg-3"> | |
| * <div class="text-center">Item 1</div> | |
| * </div> | |
| * <div class="col-sm-6 col-md-4 col-lg-3"> | |
| * <div class="text-center">Item 2</div> | |
| * </div> | |
| * <div class="col-sm-6 col-md-4 col-lg-3"> | |
| * <div class="text-center">Item 3</div> | |
| * </div> | |
| * <div class="col-sm-6 col-md-4 col-lg-3"> | |
| * <div class="text-center">Item 4</div> | |
| * </div> | |
| * <div class="col-sm-6 col-md-4 col-lg-3"> | |
| * <div class="text-center">Item 5</div> | |
| * </div> | |
| * <div class="col-sm-6 col-md-4 col-lg-3"> | |
| * <div class="text-center">Item 6</div> | |
| * </div> | |
| * <div class="col-sm-6 col-md-4 col-lg-3"> | |
| * <div class="text-center">Item 7</div> | |
| * </div> | |
| * <div class="col-sm-6 col-md-4 col-lg-3"> | |
| * <div class="text-center">Item 8</div> | |
| * </div> | |
| * </div> | |
| * | |
| * | |
| * Styleguide 10.1.3 | |
| */ | |
| [dir] .standard-grid > * { | |
| margin-bottom: 16px; } | |
| /** | |
| * Extra Small Grid | |
| */ | |
| [dir=ltr] .col-xs-1, [dir=ltr] .col-xs-2, [dir=ltr] .col-xs-3, [dir=ltr] .col-xs-4, [dir=ltr] .col-xs-5, [dir=ltr] .col-xs-6, [dir=ltr] .col-xs-7, [dir=ltr] .col-xs-8, [dir=ltr] .col-xs-9, [dir=ltr] .col-xs-10, [dir=ltr] .col-xs-11, [dir=ltr] .col-xs-12 { | |
| float: left; } | |
| [dir=rtl] .col-xs-1, [dir=rtl] .col-xs-2, [dir=rtl] .col-xs-3, [dir=rtl] .col-xs-4, [dir=rtl] .col-xs-5, [dir=rtl] .col-xs-6, [dir=rtl] .col-xs-7, [dir=rtl] .col-xs-8, [dir=rtl] .col-xs-9, [dir=rtl] .col-xs-10, [dir=rtl] .col-xs-11, [dir=rtl] .col-xs-12 { | |
| float: right; } | |
| .col-xs-1 { | |
| width: 8.33333%; } | |
| .col-xs-2 { | |
| width: 16.66667%; } | |
| .col-xs-3 { | |
| width: 25%; } | |
| .col-xs-4 { | |
| width: 33.33333%; } | |
| .col-xs-5 { | |
| width: 41.66667%; } | |
| .col-xs-6 { | |
| width: 50%; } | |
| .col-xs-7 { | |
| width: 58.33333%; } | |
| .col-xs-8 { | |
| width: 66.66667%; } | |
| .col-xs-9 { | |
| width: 75%; } | |
| .col-xs-10 { | |
| width: 83.33333%; } | |
| .col-xs-11 { | |
| width: 91.66667%; } | |
| .col-xs-12 { | |
| width: 100%; } | |
| [dir=ltr] .col-xs-push-1 { | |
| left: 8.33333%; } | |
| [dir=rtl] .col-xs-push-1 { | |
| right: 8.33333%; } | |
| [dir=ltr] .col-xs-push-2 { | |
| left: 16.66667%; } | |
| [dir=rtl] .col-xs-push-2 { | |
| right: 16.66667%; } | |
| [dir=ltr] .col-xs-push-3 { | |
| left: 25%; } | |
| [dir=rtl] .col-xs-push-3 { | |
| right: 25%; } | |
| [dir=ltr] .col-xs-push-4 { | |
| left: 33.33333%; } | |
| [dir=rtl] .col-xs-push-4 { | |
| right: 33.33333%; } | |
| [dir=ltr] .col-xs-push-5 { | |
| left: 41.66667%; } | |
| [dir=rtl] .col-xs-push-5 { | |
| right: 41.66667%; } | |
| [dir=ltr] .col-xs-push-6 { | |
| left: 50%; } | |
| [dir=rtl] .col-xs-push-6 { | |
| right: 50%; } | |
| [dir=ltr] .col-xs-push-7 { | |
| left: 58.33333%; } | |
| [dir=rtl] .col-xs-push-7 { | |
| right: 58.33333%; } | |
| [dir=ltr] .col-xs-push-8 { | |
| left: 66.66667%; } | |
| [dir=rtl] .col-xs-push-8 { | |
| right: 66.66667%; } | |
| [dir=ltr] .col-xs-push-9 { | |
| left: 75%; } | |
| [dir=rtl] .col-xs-push-9 { | |
| right: 75%; } | |
| [dir=ltr] .col-xs-push-10 { | |
| left: 83.33333%; } | |
| [dir=rtl] .col-xs-push-10 { | |
| right: 83.33333%; } | |
| [dir=ltr] .col-xs-push-11 { | |
| left: 91.66667%; } | |
| [dir=rtl] .col-xs-push-11 { | |
| right: 91.66667%; } | |
| [dir=ltr] .col-xs-pull-1 { | |
| right: 8.33333%; } | |
| [dir=rtl] .col-xs-pull-1 { | |
| left: 8.33333%; } | |
| [dir=ltr] .col-xs-pull-2 { | |
| right: 16.66667%; } | |
| [dir=rtl] .col-xs-pull-2 { | |
| left: 16.66667%; } | |
| [dir=ltr] .col-xs-pull-3 { | |
| right: 25%; } | |
| [dir=rtl] .col-xs-pull-3 { | |
| left: 25%; } | |
| [dir=ltr] .col-xs-pull-4 { | |
| right: 33.33333%; } | |
| [dir=rtl] .col-xs-pull-4 { | |
| left: 33.33333%; } | |
| [dir=ltr] .col-xs-pull-5 { | |
| right: 41.66667%; } | |
| [dir=rtl] .col-xs-pull-5 { | |
| left: 41.66667%; } | |
| [dir=ltr] .col-xs-pull-6 { | |
| right: 50%; } | |
| [dir=rtl] .col-xs-pull-6 { | |
| left: 50%; } | |
| [dir=ltr] .col-xs-pull-7 { | |
| right: 58.33333%; } | |
| [dir=rtl] .col-xs-pull-7 { | |
| left: 58.33333%; } | |
| [dir=ltr] .col-xs-pull-8 { | |
| right: 66.66667%; } | |
| [dir=rtl] .col-xs-pull-8 { | |
| left: 66.66667%; } | |
| [dir=ltr] .col-xs-pull-9 { | |
| right: 75%; } | |
| [dir=rtl] .col-xs-pull-9 { | |
| left: 75%; } | |
| [dir=ltr] .col-xs-pull-10 { | |
| right: 83.33333%; } | |
| [dir=rtl] .col-xs-pull-10 { | |
| left: 83.33333%; } | |
| [dir=ltr] .col-xs-pull-11 { | |
| right: 91.66667%; } | |
| [dir=rtl] .col-xs-pull-11 { | |
| left: 91.66667%; } | |
| [dir=ltr] .col-xs-offset-1 { | |
| margin-left: 8.33333%; } | |
| [dir=rtl] .col-xs-offset-1 { | |
| margin-right: 8.33333%; } | |
| [dir=ltr] .col-xs-offset-2 { | |
| margin-left: 16.66667%; } | |
| [dir=rtl] .col-xs-offset-2 { | |
| margin-right: 16.66667%; } | |
| [dir=ltr] .col-xs-offset-3 { | |
| margin-left: 25%; } | |
| [dir=rtl] .col-xs-offset-3 { | |
| margin-right: 25%; } | |
| [dir=ltr] .col-xs-offset-4 { | |
| margin-left: 33.33333%; } | |
| [dir=rtl] .col-xs-offset-4 { | |
| margin-right: 33.33333%; } | |
| [dir=ltr] .col-xs-offset-5 { | |
| margin-left: 41.66667%; } | |
| [dir=rtl] .col-xs-offset-5 { | |
| margin-right: 41.66667%; } | |
| [dir=ltr] .col-xs-offset-6 { | |
| margin-left: 50%; } | |
| [dir=rtl] .col-xs-offset-6 { | |
| margin-right: 50%; } | |
| [dir=ltr] .col-xs-offset-7 { | |
| margin-left: 58.33333%; } | |
| [dir=rtl] .col-xs-offset-7 { | |
| margin-right: 58.33333%; } | |
| [dir=ltr] .col-xs-offset-8 { | |
| margin-left: 66.66667%; } | |
| [dir=rtl] .col-xs-offset-8 { | |
| margin-right: 66.66667%; } | |
| [dir=ltr] .col-xs-offset-9 { | |
| margin-left: 75%; } | |
| [dir=rtl] .col-xs-offset-9 { | |
| margin-right: 75%; } | |
| [dir=ltr] .col-xs-offset-10 { | |
| margin-left: 83.33333%; } | |
| [dir=rtl] .col-xs-offset-10 { | |
| margin-right: 83.33333%; } | |
| [dir=ltr] .col-xs-offset-11 { | |
| margin-left: 91.66667%; } | |
| [dir=rtl] .col-xs-offset-11 { | |
| margin-right: 91.66667%; } | |
| .clamp-xs-18 > :nth-child(n+19) { | |
| display: none; } | |
| .clamp-xs-17 > :nth-child(n+18) { | |
| display: none; } | |
| .clamp-xs-16 > :nth-child(n+17) { | |
| display: none; } | |
| .clamp-xs-15 > :nth-child(n+16) { | |
| display: none; } | |
| .clamp-xs-14 > :nth-child(n+15) { | |
| display: none; } | |
| .clamp-xs-13 > :nth-child(n+14) { | |
| display: none; } | |
| .clamp-xs-12 > :nth-child(n+13) { | |
| display: none; } | |
| .clamp-xs-11 > :nth-child(n+12) { | |
| display: none; } | |
| .clamp-xs-10 > :nth-child(n+11) { | |
| display: none; } | |
| .clamp-xs-9 > :nth-child(n+10) { | |
| display: none; } | |
| .clamp-xs-8 > :nth-child(n+9) { | |
| display: none; } | |
| .clamp-xs-7 > :nth-child(n+8) { | |
| display: none; } | |
| .clamp-xs-6 > :nth-child(n+7) { | |
| display: none; } | |
| .clamp-xs-5 > :nth-child(n+6) { | |
| display: none; } | |
| .clamp-xs-4 > :nth-child(n+5) { | |
| display: none; } | |
| .clamp-xs-3 > :nth-child(n+4) { | |
| display: none; } | |
| .clamp-xs-2 > :nth-child(n+3) { | |
| display: none; } | |
| .clamp-xs-1 > :nth-child(n+2) { | |
| display: none; } | |
| body, | |
| .container { | |
| min-width: 360px; } | |
| /** | |
| * Small Grid | |
| */ | |
| @media (min-width: 592px) { | |
| [dir] body { | |
| padding: 0; } | |
| body::before { | |
| content: "sm"; } | |
| [dir] .standard-grid > * { | |
| margin-bottom: 16px; } | |
| [dir=ltr] .col-xs-1, [dir=ltr] .col-xs-2, [dir=ltr] .col-xs-3, [dir=ltr] .col-xs-4, [dir=ltr] .col-xs-5, [dir=ltr] .col-xs-6, [dir=ltr] .col-xs-7, [dir=ltr] .col-xs-8, [dir=ltr] .col-xs-9, [dir=ltr] .col-xs-10, [dir=ltr] .col-xs-11, [dir=ltr] .col-xs-12, [dir=ltr] .col-sm-1, [dir=ltr] .col-sm-2, [dir=ltr] .col-sm-3, [dir=ltr] .col-sm-4, [dir=ltr] .col-sm-5, [dir=ltr] .col-sm-6, [dir=ltr] .col-sm-7, [dir=ltr] .col-sm-8, [dir=ltr] .col-sm-9, [dir=ltr] .col-sm-10, [dir=ltr] .col-sm-11, [dir=ltr] .col-sm-12, [dir=ltr] .col-md-1, [dir=ltr] .col-md-2, [dir=ltr] .col-md-3, [dir=ltr] .col-md-4, [dir=ltr] .col-md-5, [dir=ltr] .col-md-6, [dir=ltr] .col-md-7, [dir=ltr] .col-md-8, [dir=ltr] .col-md-9, [dir=ltr] .col-md-10, [dir=ltr] .col-md-11, [dir=ltr] .col-md-12, [dir=ltr] .col-lg-1, [dir=ltr] .col-lg-2, [dir=ltr] .col-lg-3, [dir=ltr] .col-lg-4, [dir=ltr] .col-lg-5, [dir=ltr] .col-lg-6, [dir=ltr] .col-lg-7, [dir=ltr] .col-lg-8, [dir=ltr] .col-lg-9, [dir=ltr] .col-lg-10, [dir=ltr] .col-lg-11, [dir=ltr] .col-lg-12 { | |
| padding-left: 8px; | |
| padding-right: 8px; } | |
| [dir=rtl] .col-xs-1, [dir=rtl] .col-xs-2, [dir=rtl] .col-xs-3, [dir=rtl] .col-xs-4, [dir=rtl] .col-xs-5, [dir=rtl] .col-xs-6, [dir=rtl] .col-xs-7, [dir=rtl] .col-xs-8, [dir=rtl] .col-xs-9, [dir=rtl] .col-xs-10, [dir=rtl] .col-xs-11, [dir=rtl] .col-xs-12, [dir=rtl] .col-sm-1, [dir=rtl] .col-sm-2, [dir=rtl] .col-sm-3, [dir=rtl] .col-sm-4, [dir=rtl] .col-sm-5, [dir=rtl] .col-sm-6, [dir=rtl] .col-sm-7, [dir=rtl] .col-sm-8, [dir=rtl] .col-sm-9, [dir=rtl] .col-sm-10, [dir=rtl] .col-sm-11, [dir=rtl] .col-sm-12, [dir=rtl] .col-md-1, [dir=rtl] .col-md-2, [dir=rtl] .col-md-3, [dir=rtl] .col-md-4, [dir=rtl] .col-md-5, [dir=rtl] .col-md-6, [dir=rtl] .col-md-7, [dir=rtl] .col-md-8, [dir=rtl] .col-md-9, [dir=rtl] .col-md-10, [dir=rtl] .col-md-11, [dir=rtl] .col-md-12, [dir=rtl] .col-lg-1, [dir=rtl] .col-lg-2, [dir=rtl] .col-lg-3, [dir=rtl] .col-lg-4, [dir=rtl] .col-lg-5, [dir=rtl] .col-lg-6, [dir=rtl] .col-lg-7, [dir=rtl] .col-lg-8, [dir=rtl] .col-lg-9, [dir=rtl] .col-lg-10, [dir=rtl] .col-lg-11, [dir=rtl] .col-lg-12 { | |
| padding-right: 8px; | |
| padding-left: 8px; } | |
| [dir=ltr] .col-sm-1, [dir=ltr] .col-sm-2, [dir=ltr] .col-sm-3, [dir=ltr] .col-sm-4, [dir=ltr] .col-sm-5, [dir=ltr] .col-sm-6, [dir=ltr] .col-sm-7, [dir=ltr] .col-sm-8, [dir=ltr] .col-sm-9, [dir=ltr] .col-sm-10, [dir=ltr] .col-sm-11, [dir=ltr] .col-sm-12 { | |
| float: left; } | |
| [dir=rtl] .col-sm-1, [dir=rtl] .col-sm-2, [dir=rtl] .col-sm-3, [dir=rtl] .col-sm-4, [dir=rtl] .col-sm-5, [dir=rtl] .col-sm-6, [dir=rtl] .col-sm-7, [dir=rtl] .col-sm-8, [dir=rtl] .col-sm-9, [dir=rtl] .col-sm-10, [dir=rtl] .col-sm-11, [dir=rtl] .col-sm-12 { | |
| float: right; } | |
| .col-sm-1 { | |
| width: 8.33333%; } | |
| .col-sm-2 { | |
| width: 16.66667%; } | |
| .col-sm-3 { | |
| width: 25%; } | |
| .col-sm-4 { | |
| width: 33.33333%; } | |
| .col-sm-5 { | |
| width: 41.66667%; } | |
| .col-sm-6 { | |
| width: 50%; } | |
| .col-sm-7 { | |
| width: 58.33333%; } | |
| .col-sm-8 { | |
| width: 66.66667%; } | |
| .col-sm-9 { | |
| width: 75%; } | |
| .col-sm-10 { | |
| width: 83.33333%; } | |
| .col-sm-11 { | |
| width: 91.66667%; } | |
| .col-sm-12 { | |
| width: 100%; } | |
| [dir=ltr] .col-sm-push-1 { | |
| left: 8.33333%; } | |
| [dir=rtl] .col-sm-push-1 { | |
| right: 8.33333%; } | |
| [dir=ltr] .col-sm-push-2 { | |
| left: 16.66667%; } | |
| [dir=rtl] .col-sm-push-2 { | |
| right: 16.66667%; } | |
| [dir=ltr] .col-sm-push-3 { | |
| left: 25%; } | |
| [dir=rtl] .col-sm-push-3 { | |
| right: 25%; } | |
| [dir=ltr] .col-sm-push-4 { | |
| left: 33.33333%; } | |
| [dir=rtl] .col-sm-push-4 { | |
| right: 33.33333%; } | |
| [dir=ltr] .col-sm-push-5 { | |
| left: 41.66667%; } | |
| [dir=rtl] .col-sm-push-5 { | |
| right: 41.66667%; } | |
| [dir=ltr] .col-sm-push-6 { | |
| left: 50%; } | |
| [dir=rtl] .col-sm-push-6 { | |
| right: 50%; } | |
| [dir=ltr] .col-sm-push-7 { | |
| left: 58.33333%; } | |
| [dir=rtl] .col-sm-push-7 { | |
| right: 58.33333%; } | |
| [dir=ltr] .col-sm-push-8 { | |
| left: 66.66667%; } | |
| [dir=rtl] .col-sm-push-8 { | |
| right: 66.66667%; } | |
| [dir=ltr] .col-sm-push-9 { | |
| left: 75%; } | |
| [dir=rtl] .col-sm-push-9 { | |
| right: 75%; } | |
| [dir=ltr] .col-sm-push-10 { | |
| left: 83.33333%; } | |
| [dir=rtl] .col-sm-push-10 { | |
| right: 83.33333%; } | |
| [dir=ltr] .col-sm-push-11 { | |
| left: 91.66667%; } | |
| [dir=rtl] .col-sm-push-11 { | |
| right: 91.66667%; } | |
| [dir=ltr] .col-sm-pull-1 { | |
| right: 8.33333%; } | |
| [dir=rtl] .col-sm-pull-1 { | |
| left: 8.33333%; } | |
| [dir=ltr] .col-sm-pull-2 { | |
| right: 16.66667%; } | |
| [dir=rtl] .col-sm-pull-2 { | |
| left: 16.66667%; } | |
| [dir=ltr] .col-sm-pull-3 { | |
| right: 25%; } | |
| [dir=rtl] .col-sm-pull-3 { | |
| left: 25%; } | |
| [dir=ltr] .col-sm-pull-4 { | |
| right: 33.33333%; } | |
| [dir=rtl] .col-sm-pull-4 { | |
| left: 33.33333%; } | |
| [dir=ltr] .col-sm-pull-5 { | |
| right: 41.66667%; } | |
| [dir=rtl] .col-sm-pull-5 { | |
| left: 41.66667%; } | |
| [dir=ltr] .col-sm-pull-6 { | |
| right: 50%; } | |
| [dir=rtl] .col-sm-pull-6 { | |
| left: 50%; } | |
| [dir=ltr] .col-sm-pull-7 { | |
| right: 58.33333%; } | |
| [dir=rtl] .col-sm-pull-7 { | |
| left: 58.33333%; } | |
| [dir=ltr] .col-sm-pull-8 { | |
| right: 66.66667%; } | |
| [dir=rtl] .col-sm-pull-8 { | |
| left: 66.66667%; } | |
| [dir=ltr] .col-sm-pull-9 { | |
| right: 75%; } | |
| [dir=rtl] .col-sm-pull-9 { | |
| left: 75%; } | |
| [dir=ltr] .col-sm-pull-10 { | |
| right: 83.33333%; } | |
| [dir=rtl] .col-sm-pull-10 { | |
| left: 83.33333%; } | |
| [dir=ltr] .col-sm-pull-11 { | |
| right: 91.66667%; } | |
| [dir=rtl] .col-sm-pull-11 { | |
| left: 91.66667%; } | |
| [dir=ltr] .col-sm-offset-1 { | |
| margin-left: 8.33333%; } | |
| [dir=rtl] .col-sm-offset-1 { | |
| margin-right: 8.33333%; } | |
| [dir=ltr] .col-sm-offset-2 { | |
| margin-left: 16.66667%; } | |
| [dir=rtl] .col-sm-offset-2 { | |
| margin-right: 16.66667%; } | |
| [dir=ltr] .col-sm-offset-3 { | |
| margin-left: 25%; } | |
| [dir=rtl] .col-sm-offset-3 { | |
| margin-right: 25%; } | |
| [dir=ltr] .col-sm-offset-4 { | |
| margin-left: 33.33333%; } | |
| [dir=rtl] .col-sm-offset-4 { | |
| margin-right: 33.33333%; } | |
| [dir=ltr] .col-sm-offset-5 { | |
| margin-left: 41.66667%; } | |
| [dir=rtl] .col-sm-offset-5 { | |
| margin-right: 41.66667%; } | |
| [dir=ltr] .col-sm-offset-6 { | |
| margin-left: 50%; } | |
| [dir=rtl] .col-sm-offset-6 { | |
| margin-right: 50%; } | |
| [dir=ltr] .col-sm-offset-7 { | |
| margin-left: 58.33333%; } | |
| [dir=rtl] .col-sm-offset-7 { | |
| margin-right: 58.33333%; } | |
| [dir=ltr] .col-sm-offset-8 { | |
| margin-left: 66.66667%; } | |
| [dir=rtl] .col-sm-offset-8 { | |
| margin-right: 66.66667%; } | |
| [dir=ltr] .col-sm-offset-9 { | |
| margin-left: 75%; } | |
| [dir=rtl] .col-sm-offset-9 { | |
| margin-right: 75%; } | |
| [dir=ltr] .col-sm-offset-10 { | |
| margin-left: 83.33333%; } | |
| [dir=rtl] .col-sm-offset-10 { | |
| margin-right: 83.33333%; } | |
| [dir=ltr] .col-sm-offset-11 { | |
| margin-left: 91.66667%; } | |
| [dir=rtl] .col-sm-offset-11 { | |
| margin-right: 91.66667%; } | |
| .clamp-xs-18 > :nth-child(n+19) { | |
| display: block; } | |
| .clamp-xs-17 > :nth-child(n+18) { | |
| display: block; } | |
| .clamp-xs-16 > :nth-child(n+17) { | |
| display: block; } | |
| .clamp-xs-15 > :nth-child(n+16) { | |
| display: block; } | |
| .clamp-xs-14 > :nth-child(n+15) { | |
| display: block; } | |
| .clamp-xs-13 > :nth-child(n+14) { | |
| display: block; } | |
| .clamp-xs-12 > :nth-child(n+13) { | |
| display: block; } | |
| .clamp-xs-11 > :nth-child(n+12) { | |
| display: block; } | |
| .clamp-xs-10 > :nth-child(n+11) { | |
| display: block; } | |
| .clamp-xs-9 > :nth-child(n+10) { | |
| display: block; } | |
| .clamp-xs-8 > :nth-child(n+9) { | |
| display: block; } | |
| .clamp-xs-7 > :nth-child(n+8) { | |
| display: block; } | |
| .clamp-xs-6 > :nth-child(n+7) { | |
| display: block; } | |
| .clamp-xs-5 > :nth-child(n+6) { | |
| display: block; } | |
| .clamp-xs-4 > :nth-child(n+5) { | |
| display: block; } | |
| .clamp-xs-3 > :nth-child(n+4) { | |
| display: block; } | |
| .clamp-xs-2 > :nth-child(n+3) { | |
| display: block; } | |
| .clamp-xs-1 > :nth-child(n+2) { | |
| display: block; } | |
| .clamp-sm-18 > :nth-child(n+19) { | |
| display: none; } | |
| .clamp-sm-17 > :nth-child(n+18) { | |
| display: none; } | |
| .clamp-sm-16 > :nth-child(n+17) { | |
| display: none; } | |
| .clamp-sm-15 > :nth-child(n+16) { | |
| display: none; } | |
| .clamp-sm-14 > :nth-child(n+15) { | |
| display: none; } | |
| .clamp-sm-13 > :nth-child(n+14) { | |
| display: none; } | |
| .clamp-sm-12 > :nth-child(n+13) { | |
| display: none; } | |
| .clamp-sm-11 > :nth-child(n+12) { | |
| display: none; } | |
| .clamp-sm-10 > :nth-child(n+11) { | |
| display: none; } | |
| .clamp-sm-9 > :nth-child(n+10) { | |
| display: none; } | |
| .clamp-sm-8 > :nth-child(n+9) { | |
| display: none; } | |
| .clamp-sm-7 > :nth-child(n+8) { | |
| display: none; } | |
| .clamp-sm-6 > :nth-child(n+7) { | |
| display: none; } | |
| .clamp-sm-5 > :nth-child(n+6) { | |
| display: none; } | |
| .clamp-sm-4 > :nth-child(n+5) { | |
| display: none; } | |
| .clamp-sm-3 > :nth-child(n+4) { | |
| display: none; } | |
| .clamp-sm-2 > :nth-child(n+3) { | |
| display: none; } | |
| .clamp-sm-1 > :nth-child(n+2) { | |
| display: none; } } | |
| /** | |
| * Medium Grid | |
| */ | |
| @media (min-width: 820px) { | |
| [dir] body { | |
| padding: 0; } | |
| body::before { | |
| content: "md"; } | |
| [dir] .standard-grid > * { | |
| margin-bottom: 20px; } | |
| [dir=ltr] .col-xs-1, [dir=ltr] .col-xs-2, [dir=ltr] .col-xs-3, [dir=ltr] .col-xs-4, [dir=ltr] .col-xs-5, [dir=ltr] .col-xs-6, [dir=ltr] .col-xs-7, [dir=ltr] .col-xs-8, [dir=ltr] .col-xs-9, [dir=ltr] .col-xs-10, [dir=ltr] .col-xs-11, [dir=ltr] .col-xs-12, [dir=ltr] .col-sm-1, [dir=ltr] .col-sm-2, [dir=ltr] .col-sm-3, [dir=ltr] .col-sm-4, [dir=ltr] .col-sm-5, [dir=ltr] .col-sm-6, [dir=ltr] .col-sm-7, [dir=ltr] .col-sm-8, [dir=ltr] .col-sm-9, [dir=ltr] .col-sm-10, [dir=ltr] .col-sm-11, [dir=ltr] .col-sm-12, [dir=ltr] .col-md-1, [dir=ltr] .col-md-2, [dir=ltr] .col-md-3, [dir=ltr] .col-md-4, [dir=ltr] .col-md-5, [dir=ltr] .col-md-6, [dir=ltr] .col-md-7, [dir=ltr] .col-md-8, [dir=ltr] .col-md-9, [dir=ltr] .col-md-10, [dir=ltr] .col-md-11, [dir=ltr] .col-md-12, [dir=ltr] .col-lg-1, [dir=ltr] .col-lg-2, [dir=ltr] .col-lg-3, [dir=ltr] .col-lg-4, [dir=ltr] .col-lg-5, [dir=ltr] .col-lg-6, [dir=ltr] .col-lg-7, [dir=ltr] .col-lg-8, [dir=ltr] .col-lg-9, [dir=ltr] .col-lg-10, [dir=ltr] .col-lg-11, [dir=ltr] .col-lg-12 { | |
| padding-left: 10px; | |
| padding-right: 10px; } | |
| [dir=rtl] .col-xs-1, [dir=rtl] .col-xs-2, [dir=rtl] .col-xs-3, [dir=rtl] .col-xs-4, [dir=rtl] .col-xs-5, [dir=rtl] .col-xs-6, [dir=rtl] .col-xs-7, [dir=rtl] .col-xs-8, [dir=rtl] .col-xs-9, [dir=rtl] .col-xs-10, [dir=rtl] .col-xs-11, [dir=rtl] .col-xs-12, [dir=rtl] .col-sm-1, [dir=rtl] .col-sm-2, [dir=rtl] .col-sm-3, [dir=rtl] .col-sm-4, [dir=rtl] .col-sm-5, [dir=rtl] .col-sm-6, [dir=rtl] .col-sm-7, [dir=rtl] .col-sm-8, [dir=rtl] .col-sm-9, [dir=rtl] .col-sm-10, [dir=rtl] .col-sm-11, [dir=rtl] .col-sm-12, [dir=rtl] .col-md-1, [dir=rtl] .col-md-2, [dir=rtl] .col-md-3, [dir=rtl] .col-md-4, [dir=rtl] .col-md-5, [dir=rtl] .col-md-6, [dir=rtl] .col-md-7, [dir=rtl] .col-md-8, [dir=rtl] .col-md-9, [dir=rtl] .col-md-10, [dir=rtl] .col-md-11, [dir=rtl] .col-md-12, [dir=rtl] .col-lg-1, [dir=rtl] .col-lg-2, [dir=rtl] .col-lg-3, [dir=rtl] .col-lg-4, [dir=rtl] .col-lg-5, [dir=rtl] .col-lg-6, [dir=rtl] .col-lg-7, [dir=rtl] .col-lg-8, [dir=rtl] .col-lg-9, [dir=rtl] .col-lg-10, [dir=rtl] .col-lg-11, [dir=rtl] .col-lg-12 { | |
| padding-right: 10px; | |
| padding-left: 10px; } | |
| [dir=ltr] .col-md-1, [dir=ltr] .col-md-2, [dir=ltr] .col-md-3, [dir=ltr] .col-md-4, [dir=ltr] .col-md-5, [dir=ltr] .col-md-6, [dir=ltr] .col-md-7, [dir=ltr] .col-md-8, [dir=ltr] .col-md-9, [dir=ltr] .col-md-10, [dir=ltr] .col-md-11, [dir=ltr] .col-md-12 { | |
| float: left; } | |
| [dir=rtl] .col-md-1, [dir=rtl] .col-md-2, [dir=rtl] .col-md-3, [dir=rtl] .col-md-4, [dir=rtl] .col-md-5, [dir=rtl] .col-md-6, [dir=rtl] .col-md-7, [dir=rtl] .col-md-8, [dir=rtl] .col-md-9, [dir=rtl] .col-md-10, [dir=rtl] .col-md-11, [dir=rtl] .col-md-12 { | |
| float: right; } | |
| .col-md-1 { | |
| width: 8.33333%; } | |
| .col-md-2 { | |
| width: 16.66667%; } | |
| .col-md-3 { | |
| width: 25%; } | |
| .col-md-4 { | |
| width: 33.33333%; } | |
| .col-md-5 { | |
| width: 41.66667%; } | |
| .col-md-6 { | |
| width: 50%; } | |
| .col-md-7 { | |
| width: 58.33333%; } | |
| .col-md-8 { | |
| width: 66.66667%; } | |
| .col-md-9 { | |
| width: 75%; } | |
| .col-md-10 { | |
| width: 83.33333%; } | |
| .col-md-11 { | |
| width: 91.66667%; } | |
| .col-md-12 { | |
| width: 100%; } | |
| [dir=ltr] .col-md-push-1 { | |
| left: 8.33333%; } | |
| [dir=rtl] .col-md-push-1 { | |
| right: 8.33333%; } | |
| [dir=ltr] .col-md-push-2 { | |
| left: 16.66667%; } | |
| [dir=rtl] .col-md-push-2 { | |
| right: 16.66667%; } | |
| [dir=ltr] .col-md-push-3 { | |
| left: 25%; } | |
| [dir=rtl] .col-md-push-3 { | |
| right: 25%; } | |
| [dir=ltr] .col-md-push-4 { | |
| left: 33.33333%; } | |
| [dir=rtl] .col-md-push-4 { | |
| right: 33.33333%; } | |
| [dir=ltr] .col-md-push-5 { | |
| left: 41.66667%; } | |
| [dir=rtl] .col-md-push-5 { | |
| right: 41.66667%; } | |
| [dir=ltr] .col-md-push-6 { | |
| left: 50%; } | |
| [dir=rtl] .col-md-push-6 { | |
| right: 50%; } | |
| [dir=ltr] .col-md-push-7 { | |
| left: 58.33333%; } | |
| [dir=rtl] .col-md-push-7 { | |
| right: 58.33333%; } | |
| [dir=ltr] .col-md-push-8 { | |
| left: 66.66667%; } | |
| [dir=rtl] .col-md-push-8 { | |
| right: 66.66667%; } | |
| [dir=ltr] .col-md-push-9 { | |
| left: 75%; } | |
| [dir=rtl] .col-md-push-9 { | |
| right: 75%; } | |
| [dir=ltr] .col-md-push-10 { | |
| left: 83.33333%; } | |
| [dir=rtl] .col-md-push-10 { | |
| right: 83.33333%; } | |
| [dir=ltr] .col-md-push-11 { | |
| left: 91.66667%; } | |
| [dir=rtl] .col-md-push-11 { | |
| right: 91.66667%; } | |
| [dir=ltr] .col-md-pull-1 { | |
| right: 8.33333%; } | |
| [dir=rtl] .col-md-pull-1 { | |
| left: 8.33333%; } | |
| [dir=ltr] .col-md-pull-2 { | |
| right: 16.66667%; } | |
| [dir=rtl] .col-md-pull-2 { | |
| left: 16.66667%; } | |
| [dir=ltr] .col-md-pull-3 { | |
| right: 25%; } | |
| [dir=rtl] .col-md-pull-3 { | |
| left: 25%; } | |
| [dir=ltr] .col-md-pull-4 { | |
| right: 33.33333%; } | |
| [dir=rtl] .col-md-pull-4 { | |
| left: 33.33333%; } | |
| [dir=ltr] .col-md-pull-5 { | |
| right: 41.66667%; } | |
| [dir=rtl] .col-md-pull-5 { | |
| left: 41.66667%; } | |
| [dir=ltr] .col-md-pull-6 { | |
| right: 50%; } | |
| [dir=rtl] .col-md-pull-6 { | |
| left: 50%; } | |
| [dir=ltr] .col-md-pull-7 { | |
| right: 58.33333%; } | |
| [dir=rtl] .col-md-pull-7 { | |
| left: 58.33333%; } | |
| [dir=ltr] .col-md-pull-8 { | |
| right: 66.66667%; } | |
| [dir=rtl] .col-md-pull-8 { | |
| left: 66.66667%; } | |
| [dir=ltr] .col-md-pull-9 { | |
| right: 75%; } | |
| [dir=rtl] .col-md-pull-9 { | |
| left: 75%; } | |
| [dir=ltr] .col-md-pull-10 { | |
| right: 83.33333%; } | |
| [dir=rtl] .col-md-pull-10 { | |
| left: 83.33333%; } | |
| [dir=ltr] .col-md-pull-11 { | |
| right: 91.66667%; } | |
| [dir=rtl] .col-md-pull-11 { | |
| left: 91.66667%; } | |
| [dir=ltr] .col-md-offset-1 { | |
| margin-left: 8.33333%; } | |
| [dir=rtl] .col-md-offset-1 { | |
| margin-right: 8.33333%; } | |
| [dir=ltr] .col-md-offset-2 { | |
| margin-left: 16.66667%; } | |
| [dir=rtl] .col-md-offset-2 { | |
| margin-right: 16.66667%; } | |
| [dir=ltr] .col-md-offset-3 { | |
| margin-left: 25%; } | |
| [dir=rtl] .col-md-offset-3 { | |
| margin-right: 25%; } | |
| [dir=ltr] .col-md-offset-4 { | |
| margin-left: 33.33333%; } | |
| [dir=rtl] .col-md-offset-4 { | |
| margin-right: 33.33333%; } | |
| [dir=ltr] .col-md-offset-5 { | |
| margin-left: 41.66667%; } | |
| [dir=rtl] .col-md-offset-5 { | |
| margin-right: 41.66667%; } | |
| [dir=ltr] .col-md-offset-6 { | |
| margin-left: 50%; } | |
| [dir=rtl] .col-md-offset-6 { | |
| margin-right: 50%; } | |
| [dir=ltr] .col-md-offset-7 { | |
| margin-left: 58.33333%; } | |
| [dir=rtl] .col-md-offset-7 { | |
| margin-right: 58.33333%; } | |
| [dir=ltr] .col-md-offset-8 { | |
| margin-left: 66.66667%; } | |
| [dir=rtl] .col-md-offset-8 { | |
| margin-right: 66.66667%; } | |
| [dir=ltr] .col-md-offset-9 { | |
| margin-left: 75%; } | |
| [dir=rtl] .col-md-offset-9 { | |
| margin-right: 75%; } | |
| [dir=ltr] .col-md-offset-10 { | |
| margin-left: 83.33333%; } | |
| [dir=rtl] .col-md-offset-10 { | |
| margin-right: 83.33333%; } | |
| [dir=ltr] .col-md-offset-11 { | |
| margin-left: 91.66667%; } | |
| [dir=rtl] .col-md-offset-11 { | |
| margin-right: 91.66667%; } | |
| .clamp-sm-18 > :nth-child(n+19) { | |
| display: block; } | |
| .clamp-sm-17 > :nth-child(n+18) { | |
| display: block; } | |
| .clamp-sm-16 > :nth-child(n+17) { | |
| display: block; } | |
| .clamp-sm-15 > :nth-child(n+16) { | |
| display: block; } | |
| .clamp-sm-14 > :nth-child(n+15) { | |
| display: block; } | |
| .clamp-sm-13 > :nth-child(n+14) { | |
| display: block; } | |
| .clamp-sm-12 > :nth-child(n+13) { | |
| display: block; } | |
| .clamp-sm-11 > :nth-child(n+12) { | |
| display: block; } | |
| .clamp-sm-10 > :nth-child(n+11) { | |
| display: block; } | |
| .clamp-sm-9 > :nth-child(n+10) { | |
| display: block; } | |
| .clamp-sm-8 > :nth-child(n+9) { | |
| display: block; } | |
| .clamp-sm-7 > :nth-child(n+8) { | |
| display: block; } | |
| .clamp-sm-6 > :nth-child(n+7) { | |
| display: block; } | |
| .clamp-sm-5 > :nth-child(n+6) { | |
| display: block; } | |
| .clamp-sm-4 > :nth-child(n+5) { | |
| display: block; } | |
| .clamp-sm-3 > :nth-child(n+4) { | |
| display: block; } | |
| .clamp-sm-2 > :nth-child(n+3) { | |
| display: block; } | |
| .clamp-sm-1 > :nth-child(n+2) { | |
| display: block; } | |
| .clamp-md-18 > :nth-child(n+19) { | |
| display: none; } | |
| .clamp-md-17 > :nth-child(n+18) { | |
| display: none; } | |
| .clamp-md-16 > :nth-child(n+17) { | |
| display: none; } | |
| .clamp-md-15 > :nth-child(n+16) { | |
| display: none; } | |
| .clamp-md-14 > :nth-child(n+15) { | |
| display: none; } | |
| .clamp-md-13 > :nth-child(n+14) { | |
| display: none; } | |
| .clamp-md-12 > :nth-child(n+13) { | |
| display: none; } | |
| .clamp-md-11 > :nth-child(n+12) { | |
| display: none; } | |
| .clamp-md-10 > :nth-child(n+11) { | |
| display: none; } | |
| .clamp-md-9 > :nth-child(n+10) { | |
| display: none; } | |
| .clamp-md-8 > :nth-child(n+9) { | |
| display: none; } | |
| .clamp-md-7 > :nth-child(n+8) { | |
| display: none; } | |
| .clamp-md-6 > :nth-child(n+7) { | |
| display: none; } | |
| .clamp-md-5 > :nth-child(n+6) { | |
| display: none; } | |
| .clamp-md-4 > :nth-child(n+5) { | |
| display: none; } | |
| .clamp-md-3 > :nth-child(n+4) { | |
| display: none; } | |
| .clamp-md-2 > :nth-child(n+3) { | |
| display: none; } | |
| .clamp-md-1 > :nth-child(n+2) { | |
| display: none; } } | |
| /** | |
| * Large Grid | |
| */ | |
| @media (min-width: 1280px) { | |
| [dir] body { | |
| padding: 0; } | |
| body::before { | |
| content: "lg"; } | |
| [dir] .standard-grid > * { | |
| margin-bottom: 24px; } | |
| [dir=ltr] .col-xs-1, [dir=ltr] .col-xs-2, [dir=ltr] .col-xs-3, [dir=ltr] .col-xs-4, [dir=ltr] .col-xs-5, [dir=ltr] .col-xs-6, [dir=ltr] .col-xs-7, [dir=ltr] .col-xs-8, [dir=ltr] .col-xs-9, [dir=ltr] .col-xs-10, [dir=ltr] .col-xs-11, [dir=ltr] .col-xs-12, [dir=ltr] .col-sm-1, [dir=ltr] .col-sm-2, [dir=ltr] .col-sm-3, [dir=ltr] .col-sm-4, [dir=ltr] .col-sm-5, [dir=ltr] .col-sm-6, [dir=ltr] .col-sm-7, [dir=ltr] .col-sm-8, [dir=ltr] .col-sm-9, [dir=ltr] .col-sm-10, [dir=ltr] .col-sm-11, [dir=ltr] .col-sm-12, [dir=ltr] .col-md-1, [dir=ltr] .col-md-2, [dir=ltr] .col-md-3, [dir=ltr] .col-md-4, [dir=ltr] .col-md-5, [dir=ltr] .col-md-6, [dir=ltr] .col-md-7, [dir=ltr] .col-md-8, [dir=ltr] .col-md-9, [dir=ltr] .col-md-10, [dir=ltr] .col-md-11, [dir=ltr] .col-md-12, [dir=ltr] .col-lg-1, [dir=ltr] .col-lg-2, [dir=ltr] .col-lg-3, [dir=ltr] .col-lg-4, [dir=ltr] .col-lg-5, [dir=ltr] .col-lg-6, [dir=ltr] .col-lg-7, [dir=ltr] .col-lg-8, [dir=ltr] .col-lg-9, [dir=ltr] .col-lg-10, [dir=ltr] .col-lg-11, [dir=ltr] .col-lg-12 { | |
| padding-left: 12px; | |
| padding-right: 12px; } | |
| [dir=rtl] .col-xs-1, [dir=rtl] .col-xs-2, [dir=rtl] .col-xs-3, [dir=rtl] .col-xs-4, [dir=rtl] .col-xs-5, [dir=rtl] .col-xs-6, [dir=rtl] .col-xs-7, [dir=rtl] .col-xs-8, [dir=rtl] .col-xs-9, [dir=rtl] .col-xs-10, [dir=rtl] .col-xs-11, [dir=rtl] .col-xs-12, [dir=rtl] .col-sm-1, [dir=rtl] .col-sm-2, [dir=rtl] .col-sm-3, [dir=rtl] .col-sm-4, [dir=rtl] .col-sm-5, [dir=rtl] .col-sm-6, [dir=rtl] .col-sm-7, [dir=rtl] .col-sm-8, [dir=rtl] .col-sm-9, [dir=rtl] .col-sm-10, [dir=rtl] .col-sm-11, [dir=rtl] .col-sm-12, [dir=rtl] .col-md-1, [dir=rtl] .col-md-2, [dir=rtl] .col-md-3, [dir=rtl] .col-md-4, [dir=rtl] .col-md-5, [dir=rtl] .col-md-6, [dir=rtl] .col-md-7, [dir=rtl] .col-md-8, [dir=rtl] .col-md-9, [dir=rtl] .col-md-10, [dir=rtl] .col-md-11, [dir=rtl] .col-md-12, [dir=rtl] .col-lg-1, [dir=rtl] .col-lg-2, [dir=rtl] .col-lg-3, [dir=rtl] .col-lg-4, [dir=rtl] .col-lg-5, [dir=rtl] .col-lg-6, [dir=rtl] .col-lg-7, [dir=rtl] .col-lg-8, [dir=rtl] .col-lg-9, [dir=rtl] .col-lg-10, [dir=rtl] .col-lg-11, [dir=rtl] .col-lg-12 { | |
| padding-right: 12px; | |
| padding-left: 12px; } | |
| [dir=ltr] .col-lg-1, [dir=ltr] .col-lg-2, [dir=ltr] .col-lg-3, [dir=ltr] .col-lg-4, [dir=ltr] .col-lg-5, [dir=ltr] .col-lg-6, [dir=ltr] .col-lg-7, [dir=ltr] .col-lg-8, [dir=ltr] .col-lg-9, [dir=ltr] .col-lg-10, [dir=ltr] .col-lg-11, [dir=ltr] .col-lg-12 { | |
| float: left; } | |
| [dir=rtl] .col-lg-1, [dir=rtl] .col-lg-2, [dir=rtl] .col-lg-3, [dir=rtl] .col-lg-4, [dir=rtl] .col-lg-5, [dir=rtl] .col-lg-6, [dir=rtl] .col-lg-7, [dir=rtl] .col-lg-8, [dir=rtl] .col-lg-9, [dir=rtl] .col-lg-10, [dir=rtl] .col-lg-11, [dir=rtl] .col-lg-12 { | |
| float: right; } | |
| .col-lg-1 { | |
| width: 8.33333%; } | |
| .col-lg-2 { | |
| width: 16.66667%; } | |
| .col-lg-3 { | |
| width: 25%; } | |
| .col-lg-4 { | |
| width: 33.33333%; } | |
| .col-lg-5 { | |
| width: 41.66667%; } | |
| .col-lg-6 { | |
| width: 50%; } | |
| .col-lg-7 { | |
| width: 58.33333%; } | |
| .col-lg-8 { | |
| width: 66.66667%; } | |
| .col-lg-9 { | |
| width: 75%; } | |
| .col-lg-10 { | |
| width: 83.33333%; } | |
| .col-lg-11 { | |
| width: 91.66667%; } | |
| .col-lg-12 { | |
| width: 100%; } | |
| [dir=ltr] .col-lg-push-1 { | |
| left: 8.33333%; } | |
| [dir=rtl] .col-lg-push-1 { | |
| right: 8.33333%; } | |
| [dir=ltr] .col-lg-push-2 { | |
| left: 16.66667%; } | |
| [dir=rtl] .col-lg-push-2 { | |
| right: 16.66667%; } | |
| [dir=ltr] .col-lg-push-3 { | |
| left: 25%; } | |
| [dir=rtl] .col-lg-push-3 { | |
| right: 25%; } | |
| [dir=ltr] .col-lg-push-4 { | |
| left: 33.33333%; } | |
| [dir=rtl] .col-lg-push-4 { | |
| right: 33.33333%; } | |
| [dir=ltr] .col-lg-push-5 { | |
| left: 41.66667%; } | |
| [dir=rtl] .col-lg-push-5 { | |
| right: 41.66667%; } | |
| [dir=ltr] .col-lg-push-6 { | |
| left: 50%; } | |
| [dir=rtl] .col-lg-push-6 { | |
| right: 50%; } | |
| [dir=ltr] .col-lg-push-7 { | |
| left: 58.33333%; } | |
| [dir=rtl] .col-lg-push-7 { | |
| right: 58.33333%; } | |
| [dir=ltr] .col-lg-push-8 { | |
| left: 66.66667%; } | |
| [dir=rtl] .col-lg-push-8 { | |
| right: 66.66667%; } | |
| [dir=ltr] .col-lg-push-9 { | |
| left: 75%; } | |
| [dir=rtl] .col-lg-push-9 { | |
| right: 75%; } | |
| [dir=ltr] .col-lg-push-10 { | |
| left: 83.33333%; } | |
| [dir=rtl] .col-lg-push-10 { | |
| right: 83.33333%; } | |
| [dir=ltr] .col-lg-push-11 { | |
| left: 91.66667%; } | |
| [dir=rtl] .col-lg-push-11 { | |
| right: 91.66667%; } | |
| [dir=ltr] .col-lg-pull-1 { | |
| right: 8.33333%; } | |
| [dir=rtl] .col-lg-pull-1 { | |
| left: 8.33333%; } | |
| [dir=ltr] .col-lg-pull-2 { | |
| right: 16.66667%; } | |
| [dir=rtl] .col-lg-pull-2 { | |
| left: 16.66667%; } | |
| [dir=ltr] .col-lg-pull-3 { | |
| right: 25%; } | |
| [dir=rtl] .col-lg-pull-3 { | |
| left: 25%; } | |
| [dir=ltr] .col-lg-pull-4 { | |
| right: 33.33333%; } | |
| [dir=rtl] .col-lg-pull-4 { | |
| left: 33.33333%; } | |
| [dir=ltr] .col-lg-pull-5 { | |
| right: 41.66667%; } | |
| [dir=rtl] .col-lg-pull-5 { | |
| left: 41.66667%; } | |
| [dir=ltr] .col-lg-pull-6 { | |
| right: 50%; } | |
| [dir=rtl] .col-lg-pull-6 { | |
| left: 50%; } | |
| [dir=ltr] .col-lg-pull-7 { | |
| right: 58.33333%; } | |
| [dir=rtl] .col-lg-pull-7 { | |
| left: 58.33333%; } | |
| [dir=ltr] .col-lg-pull-8 { | |
| right: 66.66667%; } | |
| [dir=rtl] .col-lg-pull-8 { | |
| left: 66.66667%; } | |
| [dir=ltr] .col-lg-pull-9 { | |
| right: 75%; } | |
| [dir=rtl] .col-lg-pull-9 { | |
| left: 75%; } | |
| [dir=ltr] .col-lg-pull-10 { | |
| right: 83.33333%; } | |
| [dir=rtl] .col-lg-pull-10 { | |
| left: 83.33333%; } | |
| [dir=ltr] .col-lg-pull-11 { | |
| right: 91.66667%; } | |
| [dir=rtl] .col-lg-pull-11 { | |
| left: 91.66667%; } | |
| [dir=ltr] .col-lg-offset-1 { | |
| margin-left: 8.33333%; } | |
| [dir=rtl] .col-lg-offset-1 { | |
| margin-right: 8.33333%; } | |
| [dir=ltr] .col-lg-offset-2 { | |
| margin-left: 16.66667%; } | |
| [dir=rtl] .col-lg-offset-2 { | |
| margin-right: 16.66667%; } | |
| [dir=ltr] .col-lg-offset-3 { | |
| margin-left: 25%; } | |
| [dir=rtl] .col-lg-offset-3 { | |
| margin-right: 25%; } | |
| [dir=ltr] .col-lg-offset-4 { | |
| margin-left: 33.33333%; } | |
| [dir=rtl] .col-lg-offset-4 { | |
| margin-right: 33.33333%; } | |
| [dir=ltr] .col-lg-offset-5 { | |
| margin-left: 41.66667%; } | |
| [dir=rtl] .col-lg-offset-5 { | |
| margin-right: 41.66667%; } | |
| [dir=ltr] .col-lg-offset-6 { | |
| margin-left: 50%; } | |
| [dir=rtl] .col-lg-offset-6 { | |
| margin-right: 50%; } | |
| [dir=ltr] .col-lg-offset-7 { | |
| margin-left: 58.33333%; } | |
| [dir=rtl] .col-lg-offset-7 { | |
| margin-right: 58.33333%; } | |
| [dir=ltr] .col-lg-offset-8 { | |
| margin-left: 66.66667%; } | |
| [dir=rtl] .col-lg-offset-8 { | |
| margin-right: 66.66667%; } | |
| [dir=ltr] .col-lg-offset-9 { | |
| margin-left: 75%; } | |
| [dir=rtl] .col-lg-offset-9 { | |
| margin-right: 75%; } | |
| [dir=ltr] .col-lg-offset-10 { | |
| margin-left: 83.33333%; } | |
| [dir=rtl] .col-lg-offset-10 { | |
| margin-right: 83.33333%; } | |
| [dir=ltr] .col-lg-offset-11 { | |
| margin-left: 91.66667%; } | |
| [dir=rtl] .col-lg-offset-11 { | |
| margin-right: 91.66667%; } | |
| .clamp-md-18 > :nth-child(n+19) { | |
| display: block; } | |
| .clamp-md-17 > :nth-child(n+18) { | |
| display: block; } | |
| .clamp-md-16 > :nth-child(n+17) { | |
| display: block; } | |
| .clamp-md-15 > :nth-child(n+16) { | |
| display: block; } | |
| .clamp-md-14 > :nth-child(n+15) { | |
| display: block; } | |
| .clamp-md-13 > :nth-child(n+14) { | |
| display: block; } | |
| .clamp-md-12 > :nth-child(n+13) { | |
| display: block; } | |
| .clamp-md-11 > :nth-child(n+12) { | |
| display: block; } | |
| .clamp-md-10 > :nth-child(n+11) { | |
| display: block; } | |
| .clamp-md-9 > :nth-child(n+10) { | |
| display: block; } | |
| .clamp-md-8 > :nth-child(n+9) { | |
| display: block; } | |
| .clamp-md-7 > :nth-child(n+8) { | |
| display: block; } | |
| .clamp-md-6 > :nth-child(n+7) { | |
| display: block; } | |
| .clamp-md-5 > :nth-child(n+6) { | |
| display: block; } | |
| .clamp-md-4 > :nth-child(n+5) { | |
| display: block; } | |
| .clamp-md-3 > :nth-child(n+4) { | |
| display: block; } | |
| .clamp-md-2 > :nth-child(n+3) { | |
| display: block; } | |
| .clamp-md-1 > :nth-child(n+2) { | |
| display: block; } | |
| .clamp-lg-18 > :nth-child(n+19) { | |
| display: none; } | |
| .clamp-lg-17 > :nth-child(n+18) { | |
| display: none; } | |
| .clamp-lg-16 > :nth-child(n+17) { | |
| display: none; } | |
| .clamp-lg-15 > :nth-child(n+16) { | |
| display: none; } | |
| .clamp-lg-14 > :nth-child(n+15) { | |
| display: none; } | |
| .clamp-lg-13 > :nth-child(n+14) { | |
| display: none; } | |
| .clamp-lg-12 > :nth-child(n+13) { | |
| display: none; } | |
| .clamp-lg-11 > :nth-child(n+12) { | |
| display: none; } | |
| .clamp-lg-10 > :nth-child(n+11) { | |
| display: none; } | |
| .clamp-lg-9 > :nth-child(n+10) { | |
| display: none; } | |
| .clamp-lg-8 > :nth-child(n+9) { | |
| display: none; } | |
| .clamp-lg-7 > :nth-child(n+8) { | |
| display: none; } | |
| .clamp-lg-6 > :nth-child(n+7) { | |
| display: none; } | |
| .clamp-lg-5 > :nth-child(n+6) { | |
| display: none; } | |
| .clamp-lg-4 > :nth-child(n+5) { | |
| display: none; } | |
| .clamp-lg-3 > :nth-child(n+4) { | |
| display: none; } | |
| .clamp-lg-2 > :nth-child(n+3) { | |
| display: none; } | |
| .clamp-lg-1 > :nth-child(n+2) { | |
| display: none; } } | |
| /** | |
| * Grid Overlay | |
| */ | |
| .grid-overlay { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| z-index: 9999; | |
| pointer-events: none; } | |
| [dir=ltr] .grid-overlay { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .grid-overlay { | |
| left: 0; | |
| right: 0; } | |
| [dir] .grid-overlay.grid-overlay-baseline { | |
| background-size: 100% 8px; } | |
| .grid-overlay-baseline-highlight { | |
| position: absolute; | |
| top: 0; | |
| height: 1px; | |
| pointer-events: none; } | |
| [dir=ltr] .grid-overlay-baseline-highlight { | |
| left: 0; | |
| right: 0; } | |
| [dir=rtl] .grid-overlay-baseline-highlight { | |
| right: 0; | |
| left: 0; } | |
| .grid-overlay-row { | |
| height: 100%; } | |
| .grid-overlay-col-1, | |
| .grid-overlay-col-2, | |
| .grid-overlay-col-3, | |
| .grid-overlay-col-4, | |
| .grid-overlay-col-5, | |
| .grid-overlay-col-6, | |
| .grid-overlay-col-7, | |
| .grid-overlay-col-8, | |
| .grid-overlay-col-9, | |
| .grid-overlay-col-10, | |
| .grid-overlay-col-11, | |
| .grid-overlay-col-12 { | |
| height: 100%; } | |
| [dir] .grid-overlay-col-1, [dir] .grid-overlay-col-2, [dir] .grid-overlay-col-3, [dir] .grid-overlay-col-4, [dir] .grid-overlay-col-5, [dir] .grid-overlay-col-6, [dir] .grid-overlay-col-7, [dir] .grid-overlay-col-8, [dir] .grid-overlay-col-9, [dir] .grid-overlay-col-10, [dir] .grid-overlay-col-11, [dir] .grid-overlay-col-12 { | |
| background-clip: content-box; } | |
| .grid-overlay-label { | |
| position: fixed; | |
| top: 48px; | |
| line-height: 1; } | |
| [dir] .grid-overlay-label { | |
| background: rgba(255, 255, 255, 0.2); | |
| padding: 5px 10px; } | |
| [dir=ltr] .grid-overlay-label { | |
| right: 0; } | |
| [dir=rtl] .grid-overlay-label { | |
| left: 0; } | |
| /** | |
| * Spoticons | |
| * | |
| * Variable Set: Spoticons | |
| * | |
| * Styleguide 1.2.1 | |
| */ | |
| @font-face { | |
| font-family: "glue-spoticon"; | |
| src: url("https://d2j0f09xqmv212.cloudfront.net/fonts/spoticon_369e8541fc833fe917e7746e395e9384.ttf") format("truetype"); | |
| font-weight: normal; | |
| font-style: normal; } | |
| [class^="spoticon-"]::before, | |
| [class*=" spoticon-"]::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| display: inline-block; | |
| text-decoration: inherit; } | |
| .spoticon-add-to-playlist-16::before { | |
| content: "\f164"; | |
| font-size: 16px; } | |
| .spoticon-add-to-playlist-24::before { | |
| content: "\f3AC"; | |
| font-size: 24px; } | |
| .spoticon-add-to-playlist-32::before { | |
| content: "\f165"; | |
| font-size: 32px; } | |
| .spoticon-add-to-playlist-48::before { | |
| content: "\f40A"; | |
| font-size: 48px; } | |
| .spoticon-add-to-queue-16::before { | |
| content: "\f1BD"; | |
| font-size: 16px; } | |
| .spoticon-add-to-queue-24::before { | |
| content: "\f3B7"; | |
| font-size: 24px; } | |
| .spoticon-add-to-queue-32::before { | |
| content: "\f1BE"; | |
| font-size: 32px; } | |
| .spoticon-add-to-queue-48::before { | |
| content: "\f40B"; | |
| font-size: 48px; } | |
| .spoticon-add-to-queue-64::before { | |
| content: "\f1BF"; | |
| font-size: 64px; } | |
| .spoticon-addfollow-16::before { | |
| content: "\f1E5"; | |
| font-size: 16px; } | |
| .spoticon-addfollow-24::before { | |
| content: "\f3BA"; | |
| font-size: 24px; } | |
| .spoticon-addfollow-32::before { | |
| content: "\f1E6"; | |
| font-size: 32px; } | |
| .spoticon-addfollow-48::before { | |
| content: "\f40C"; | |
| font-size: 48px; } | |
| .spoticon-addfollow-64::before { | |
| content: "\f1F5"; | |
| font-size: 64px; } | |
| .spoticon-addfollowers-16::before { | |
| content: "\f22F"; | |
| font-size: 16px; } | |
| .spoticon-addfollowers-24::before { | |
| content: "\f3C4"; | |
| font-size: 24px; } | |
| .spoticon-addfollowers-32::before { | |
| content: "\f230"; | |
| font-size: 32px; } | |
| .spoticon-addfollowers-64::before { | |
| content: "\f231"; | |
| font-size: 64px; } | |
| .spoticon-addsuggestedsong-16::before { | |
| content: "\f22C"; | |
| font-size: 16px; } | |
| .spoticon-addsuggestedsong-24::before { | |
| content: "\f48b"; | |
| font-size: 24px; } | |
| .spoticon-addsuggestedsong-32::before { | |
| content: "\f22D"; | |
| font-size: 32px; } | |
| .spoticon-addsuggestedsong-48::before { | |
| content: "\f48d"; | |
| font-size: 48px; } | |
| .spoticon-addsuggestedsong-64::before { | |
| content: "\f22E"; | |
| font-size: 64px; } | |
| .spoticon-airplay-16::before { | |
| content: "\f277"; | |
| font-size: 16px; } | |
| .spoticon-airplay-32::before { | |
| content: "\f278"; | |
| font-size: 32px; } | |
| .spoticon-album-16::before { | |
| content: "\f100"; | |
| font-size: 16px; } | |
| .spoticon-album-24::before { | |
| content: "\f391"; | |
| font-size: 24px; } | |
| .spoticon-album-32::before { | |
| content: "\f101"; | |
| font-size: 32px; } | |
| .spoticon-album-48::before { | |
| content: "\f40D"; | |
| font-size: 48px; } | |
| .spoticon-album-64::before { | |
| content: "\f167"; | |
| font-size: 64px; } | |
| .spoticon-album-contained-16::before { | |
| content: "\f1C0"; | |
| font-size: 16px; } | |
| .spoticon-album-contained-32::before { | |
| content: "\f1C1"; | |
| font-size: 32px; } | |
| .spoticon-album-contained-64::before { | |
| content: "\f1C2"; | |
| font-size: 64px; } | |
| .spoticon-arrow-down-16::before { | |
| content: "\f1DF"; | |
| font-size: 16px; } | |
| .spoticon-arrow-down-24::before { | |
| content: "\f3B1"; | |
| font-size: 24px; } | |
| .spoticon-arrow-down-32::before { | |
| content: "\f1E0"; | |
| font-size: 32px; } | |
| .spoticon-arrow-down-48::before { | |
| content: "\f40E"; | |
| font-size: 48px; } | |
| .spoticon-arrow-down-64::before { | |
| content: "\f1E1"; | |
| font-size: 64px; } | |
| .spoticon-arrow-left-16::before { | |
| content: "\f183"; | |
| font-size: 16px; } | |
| .spoticon-arrow-left-24::before { | |
| content: "\f3AE"; | |
| font-size: 24px; } | |
| .spoticon-arrow-left-32::before { | |
| content: "\f184"; | |
| font-size: 32px; } | |
| .spoticon-arrow-left-48::before { | |
| content: "\f40F"; | |
| font-size: 48px; } | |
| .spoticon-arrow-left-64::before { | |
| content: "\f185"; | |
| font-size: 64px; } | |
| .spoticon-arrow-right-16::before { | |
| content: "\f186"; | |
| font-size: 16px; } | |
| .spoticon-arrow-right-24::before { | |
| content: "\f3AF"; | |
| font-size: 24px; } | |
| .spoticon-arrow-right-32::before { | |
| content: "\f187"; | |
| font-size: 32px; } | |
| .spoticon-arrow-right-48::before { | |
| content: "\f410"; | |
| font-size: 48px; } | |
| .spoticon-arrow-right-64::before { | |
| content: "\f188"; | |
| font-size: 64px; } | |
| .spoticon-arrow-up-16::before { | |
| content: "\f1DC"; | |
| font-size: 16px; } | |
| .spoticon-arrow-up-24::before { | |
| content: "\f3B0"; | |
| font-size: 24px; } | |
| .spoticon-arrow-up-32::before { | |
| content: "\f1DD"; | |
| font-size: 32px; } | |
| .spoticon-arrow-up-48::before { | |
| content: "\f411"; | |
| font-size: 48px; } | |
| .spoticon-arrow-up-64::before { | |
| content: "\f1DE"; | |
| font-size: 64px; } | |
| .spoticon-artist-16::before { | |
| content: "\f102"; | |
| font-size: 16px; } | |
| .spoticon-artist-24::before { | |
| content: "\f392"; | |
| font-size: 24px; } | |
| .spoticon-artist-32::before { | |
| content: "\f103"; | |
| font-size: 32px; } | |
| .spoticon-artist-48::before { | |
| content: "\f412"; | |
| font-size: 48px; } | |
| .spoticon-artist-64::before { | |
| content: "\f168"; | |
| font-size: 64px; } | |
| .spoticon-artist-active-16::before { | |
| content: "\f361"; | |
| font-size: 16px; } | |
| .spoticon-artist-active-24::before { | |
| content: "\f362"; | |
| font-size: 24px; } | |
| .spoticon-artist-active-32::before { | |
| content: "\f363"; | |
| font-size: 32px; } | |
| .spoticon-artist-active-48::before { | |
| content: "\f413"; | |
| font-size: 48px; } | |
| .spoticon-artist-active-64::before { | |
| content: "\f364"; | |
| font-size: 64px; } | |
| .spoticon-attach-16::before { | |
| content: "\f104"; | |
| font-size: 16px; } | |
| .spoticon-attach-24::before { | |
| content: "\f4a1"; | |
| font-size: 24px; } | |
| .spoticon-attach-32::before { | |
| content: "\f105"; | |
| font-size: 32px; } | |
| .spoticon-attach-48::before { | |
| content: "\f4a2"; | |
| font-size: 48px; } | |
| .spoticon-attach-64::before { | |
| content: "\f4a3"; | |
| font-size: 64px; } | |
| .spoticon-available-offline-16::before { | |
| content: "\f365"; | |
| font-size: 16px; } | |
| .spoticon-available-offline-24::before { | |
| content: "\f366"; | |
| font-size: 24px; } | |
| .spoticon-available-offline-32::before { | |
| content: "\f367"; | |
| font-size: 32px; } | |
| .spoticon-available-offline-48::before { | |
| content: "\f414"; | |
| font-size: 48px; } | |
| .spoticon-available-offline-64::before { | |
| content: "\f368"; | |
| font-size: 64px; } | |
| .spoticon-ban-16::before { | |
| content: "\f31E"; | |
| font-size: 16px; } | |
| .spoticon-ban-32::before { | |
| content: "\f31D"; | |
| font-size: 32px; } | |
| .spoticon-ban-48::before { | |
| content: "\f415"; | |
| font-size: 48px; } | |
| .spoticon-ban-active-16::before { | |
| content: "\f324"; | |
| font-size: 16px; } | |
| .spoticon-ban-active-32::before { | |
| content: "\f323"; | |
| font-size: 32px; } | |
| .spoticon-ban-active-48::before { | |
| content: "\f416"; | |
| font-size: 48px; } | |
| .spoticon-block-16::before { | |
| content: "\f106"; | |
| font-size: 16px; } | |
| .spoticon-block-24::before { | |
| content: "\f49f"; | |
| font-size: 24px; } | |
| .spoticon-block-32::before { | |
| content: "\f107"; | |
| font-size: 32px; } | |
| .spoticon-block-48::before { | |
| content: "\f4a0"; | |
| font-size: 48px; } | |
| .spoticon-block-64::before { | |
| content: "\f169"; | |
| font-size: 64px; } | |
| .spoticon-bluetooth-16::before { | |
| content: "\f494"; | |
| font-size: 16px; } | |
| .spoticon-bluetooth-24::before { | |
| content: "\f495"; | |
| font-size: 24px; } | |
| .spoticon-bluetooth-32::before { | |
| content: "\f496"; | |
| font-size: 32px; } | |
| .spoticon-bluetooth-48::before { | |
| content: "\f497"; | |
| font-size: 48px; } | |
| .spoticon-bluetooth-64::before { | |
| content: "\f498"; | |
| font-size: 64px; } | |
| .spoticon-browse-16::before { | |
| content: "\f108"; | |
| font-size: 16px; } | |
| .spoticon-browse-24::before { | |
| content: "\f393"; | |
| font-size: 24px; } | |
| .spoticon-browse-32::before { | |
| content: "\f109"; | |
| font-size: 32px; } | |
| .spoticon-browse-48::before { | |
| content: "\f417"; | |
| font-size: 48px; } | |
| .spoticon-browse-64::before { | |
| content: "\f16A"; | |
| font-size: 64px; } | |
| .spoticon-browse-active-16::before { | |
| content: "\f369"; | |
| font-size: 16px; } | |
| .spoticon-browse-active-24::before { | |
| content: "\f36A"; | |
| font-size: 24px; } | |
| .spoticon-browse-active-32::before { | |
| content: "\f36B"; | |
| font-size: 32px; } | |
| .spoticon-browse-active-48::before { | |
| content: "\f418"; | |
| font-size: 48px; } | |
| .spoticon-browse-active-64::before { | |
| content: "\f36C"; | |
| font-size: 64px; } | |
| .spoticon-camera-16::before { | |
| content: "\f265"; | |
| font-size: 16px; } | |
| .spoticon-camera-24::before { | |
| content: "\f3CA"; | |
| font-size: 24px; } | |
| .spoticon-camera-32::before { | |
| content: "\f266"; | |
| font-size: 32px; } | |
| .spoticon-camera-48::before { | |
| content: "\f419"; | |
| font-size: 48px; } | |
| .spoticon-camera-64::before { | |
| content: "\f3E4"; | |
| font-size: 64px; } | |
| .spoticon-carplay-16::before { | |
| content: "\f271"; | |
| font-size: 16px; } | |
| .spoticon-carplay-32::before { | |
| content: "\f272"; | |
| font-size: 32px; } | |
| .spoticon-chart-down-16::before { | |
| content: "\f25E"; | |
| font-size: 16px; } | |
| .spoticon-chart-down-24::before { | |
| content: "\f3C8"; | |
| font-size: 24px; } | |
| .spoticon-chart-down-32::before { | |
| content: "\f25F"; | |
| font-size: 32px; } | |
| .spoticon-chart-down-48::before { | |
| content: "\f41A"; | |
| font-size: 48px; } | |
| .spoticon-chart-down-64::before { | |
| content: "\f3E6"; | |
| font-size: 64px; } | |
| .spoticon-chart-new-16::before { | |
| content: "\f25B"; | |
| font-size: 16px; } | |
| .spoticon-chart-new-32::before { | |
| content: "\f25C"; | |
| font-size: 32px; } | |
| .spoticon-chart-up-16::before { | |
| content: "\f262"; | |
| font-size: 16px; } | |
| .spoticon-chart-up-24::before { | |
| content: "\f3C9"; | |
| font-size: 24px; } | |
| .spoticon-chart-up-32::before { | |
| content: "\f263"; | |
| font-size: 32px; } | |
| .spoticon-chart-up-48::before { | |
| content: "\f41B"; | |
| font-size: 48px; } | |
| .spoticon-chart-up-64::before { | |
| content: "\f3E5"; | |
| font-size: 64px; } | |
| .spoticon-check-16::before { | |
| content: "\f10a"; | |
| font-size: 16px; } | |
| .spoticon-check-24::before { | |
| content: "\f1C9"; | |
| font-size: 24px; } | |
| .spoticon-check-32::before { | |
| content: "\f10b"; | |
| font-size: 32px; } | |
| .spoticon-check-48::before { | |
| content: "\f41C"; | |
| font-size: 48px; } | |
| .spoticon-check-64::before { | |
| content: "\f16B"; | |
| font-size: 64px; } | |
| .spoticon-check-alt-16::before { | |
| content: "\f34D"; | |
| font-size: 16px; } | |
| .spoticon-check-alt-24::before { | |
| content: "\f34E"; | |
| font-size: 24px; } | |
| .spoticon-check-alt-32::before { | |
| content: "\f34F"; | |
| font-size: 32px; } | |
| .spoticon-check-alt-48::before { | |
| content: "\f41D"; | |
| font-size: 48px; } | |
| .spoticon-check-alt-64::before { | |
| content: "\f350"; | |
| font-size: 64px; } | |
| .spoticon-chevron-down-16::before { | |
| content: "\f10c"; | |
| font-size: 16px; } | |
| .spoticon-chevron-down-24::before { | |
| content: "\f394"; | |
| font-size: 24px; } | |
| .spoticon-chevron-down-32::before { | |
| content: "\f10d"; | |
| font-size: 32px; } | |
| .spoticon-chevron-down-48::before { | |
| content: "\f41E"; | |
| font-size: 48px; } | |
| .spoticon-chevron-down-64::before { | |
| content: "\f16C"; | |
| font-size: 64px; } | |
| .spoticon-chevron-left-16::before { | |
| content: "\f10e"; | |
| font-size: 16px; } | |
| .spoticon-chevron-left-24::before { | |
| content: "\f395"; | |
| font-size: 24px; } | |
| .spoticon-chevron-left-32::before { | |
| content: "\f10f"; | |
| font-size: 32px; } | |
| .spoticon-chevron-left-48::before { | |
| content: "\f41F"; | |
| font-size: 48px; } | |
| .spoticon-chevron-left-64::before { | |
| content: "\f16D"; | |
| font-size: 64px; } | |
| .spoticon-chevron-right-16::before { | |
| content: "\f110"; | |
| font-size: 16px; } | |
| .spoticon-chevron-right-24::before { | |
| content: "\f396"; | |
| font-size: 24px; } | |
| .spoticon-chevron-right-32::before { | |
| content: "\f111"; | |
| font-size: 32px; } | |
| .spoticon-chevron-right-48::before { | |
| content: "\f420"; | |
| font-size: 48px; } | |
| .spoticon-chevron-right-64::before { | |
| content: "\f16E"; | |
| font-size: 64px; } | |
| .spoticon-chevron-up-16::before { | |
| content: "\f112"; | |
| font-size: 16px; } | |
| .spoticon-chevron-up-24::before { | |
| content: "\f397"; | |
| font-size: 24px; } | |
| .spoticon-chevron-up-32::before { | |
| content: "\f113"; | |
| font-size: 32px; } | |
| .spoticon-chevron-up-48::before { | |
| content: "\f421"; | |
| font-size: 48px; } | |
| .spoticon-chevron-up-64::before { | |
| content: "\f16F"; | |
| font-size: 64px; } | |
| .spoticon-chromecast-connected-16::before { | |
| content: "\f30B"; | |
| font-size: 16px; } | |
| .spoticon-chromecast-connected-32::before { | |
| content: "\f30C"; | |
| font-size: 32px; } | |
| .spoticon-chromecast-connecting-one-16::before { | |
| content: "\f30D"; | |
| font-size: 16px; } | |
| .spoticon-chromecast-connecting-one-32::before { | |
| content: "\f30E"; | |
| font-size: 32px; } | |
| .spoticon-chromecast-connecting-three-16::before { | |
| content: "\f311"; | |
| font-size: 16px; } | |
| .spoticon-chromecast-connecting-three-32::before { | |
| content: "\f312"; | |
| font-size: 32px; } | |
| .spoticon-chromecast-connecting-two-16::before { | |
| content: "\f30F"; | |
| font-size: 16px; } | |
| .spoticon-chromecast-connecting-two-32::before { | |
| content: "\f310"; | |
| font-size: 32px; } | |
| .spoticon-chromecast-disconnected-16::before { | |
| content: "\f309"; | |
| font-size: 16px; } | |
| .spoticon-chromecast-disconnected-32::before { | |
| content: "\f30A"; | |
| font-size: 32px; } | |
| .spoticon-collaborative-playlist-16::before { | |
| content: "\f114"; | |
| font-size: 16px; } | |
| .spoticon-collaborative-playlist-24::before { | |
| content: "\f499"; | |
| font-size: 24px; } | |
| .spoticon-collaborative-playlist-32::before { | |
| content: "\f115"; | |
| font-size: 32px; } | |
| .spoticon-collaborative-playlist-48::before { | |
| content: "\f49a"; | |
| font-size: 48px; } | |
| .spoticon-collaborative-playlist-64::before { | |
| content: "\f170"; | |
| font-size: 64px; } | |
| .spoticon-collection-16::before { | |
| content: "\f116"; | |
| font-size: 16px; } | |
| .spoticon-collection-24::before { | |
| content: "\f398"; | |
| font-size: 24px; } | |
| .spoticon-collection-32::before { | |
| content: "\f117"; | |
| font-size: 32px; } | |
| .spoticon-collection-48::before { | |
| content: "\f422"; | |
| font-size: 48px; } | |
| .spoticon-collection-64::before { | |
| content: "\f171"; | |
| font-size: 64px; } | |
| .spoticon-collection-active-16::before { | |
| content: "\f379"; | |
| font-size: 16px; } | |
| .spoticon-collection-active-24::before { | |
| content: "\f37A"; | |
| font-size: 24px; } | |
| .spoticon-collection-active-32::before { | |
| content: "\f37B"; | |
| font-size: 32px; } | |
| .spoticon-collection-active-48::before { | |
| content: "\f423"; | |
| font-size: 48px; } | |
| .spoticon-collection-active-64::before { | |
| content: "\f37C"; | |
| font-size: 64px; } | |
| .spoticon-connect-to-devices-16::before { | |
| content: "\f328"; | |
| font-size: 16px; } | |
| .spoticon-connect-to-devices-24::before { | |
| content: "\f3DE"; | |
| font-size: 24px; } | |
| .spoticon-connect-to-devices-32::before { | |
| content: "\f327"; | |
| font-size: 32px; } | |
| .spoticon-connect-to-devices-48::before { | |
| content: "\f424"; | |
| font-size: 48px; } | |
| .spoticon-connect-to-devices-64::before { | |
| content: "\f3E7"; | |
| font-size: 64px; } | |
| .spoticon-copy-16::before { | |
| content: "\f389"; | |
| font-size: 16px; } | |
| .spoticon-copy-24::before { | |
| content: "\f38A"; | |
| font-size: 24px; } | |
| .spoticon-copy-32::before { | |
| content: "\f38B"; | |
| font-size: 32px; } | |
| .spoticon-copy-48::before { | |
| content: "\f425"; | |
| font-size: 48px; } | |
| .spoticon-copy-64::before { | |
| content: "\f38C"; | |
| font-size: 64px; } | |
| .spoticon-destination-pin-16::before { | |
| content: "\f32D"; | |
| font-size: 16px; } | |
| .spoticon-destination-pin-24::before { | |
| content: "\f32E"; | |
| font-size: 24px; } | |
| .spoticon-destination-pin-32::before { | |
| content: "\f32F"; | |
| font-size: 32px; } | |
| .spoticon-destination-pin-48::before { | |
| content: "\f426"; | |
| font-size: 48px; } | |
| .spoticon-destination-pin-64::before { | |
| content: "\f330"; | |
| font-size: 64px; } | |
| .spoticon-device-arm-16::before { | |
| content: "\f305"; | |
| font-size: 16px; } | |
| .spoticon-device-arm-24::before { | |
| content: "\f3D5"; | |
| font-size: 24px; } | |
| .spoticon-device-arm-32::before { | |
| content: "\f306"; | |
| font-size: 32px; } | |
| .spoticon-device-arm-48::before { | |
| content: "\f427"; | |
| font-size: 48px; } | |
| .spoticon-device-arm-64::before { | |
| content: "\f3E8"; | |
| font-size: 64px; } | |
| .spoticon-device-car-16::before { | |
| content: "\f317"; | |
| font-size: 16px; } | |
| .spoticon-device-car-24::before { | |
| content: "\f3D8"; | |
| font-size: 24px; } | |
| .spoticon-device-car-32::before { | |
| content: "\f318"; | |
| font-size: 32px; } | |
| .spoticon-device-car-48::before { | |
| content: "\f428"; | |
| font-size: 48px; } | |
| .spoticon-device-car-64::before { | |
| content: "\f401"; | |
| font-size: 64px; } | |
| .spoticon-device-computer-16::before { | |
| content: "\f29B"; | |
| font-size: 16px; } | |
| .spoticon-device-computer-24::before { | |
| content: "\f3D0"; | |
| font-size: 24px; } | |
| .spoticon-device-computer-32::before { | |
| content: "\f29C"; | |
| font-size: 32px; } | |
| .spoticon-device-computer-48::before { | |
| content: "\f429"; | |
| font-size: 48px; } | |
| .spoticon-device-computer-64::before { | |
| content: "\f3E9"; | |
| font-size: 64px; } | |
| .spoticon-device-mobile-16::before { | |
| content: "\f301"; | |
| font-size: 16px; } | |
| .spoticon-device-mobile-24::before { | |
| content: "\f3D3"; | |
| font-size: 24px; } | |
| .spoticon-device-mobile-32::before { | |
| content: "\f302"; | |
| font-size: 32px; } | |
| .spoticon-device-mobile-48::before { | |
| content: "\f42A"; | |
| font-size: 48px; } | |
| .spoticon-device-mobile-64::before { | |
| content: "\f3EA"; | |
| font-size: 64px; } | |
| .spoticon-device-multispeaker-16::before { | |
| content: "\f315"; | |
| font-size: 16px; } | |
| .spoticon-device-multispeaker-24::before { | |
| content: "\f3D7"; | |
| font-size: 24px; } | |
| .spoticon-device-multispeaker-32::before { | |
| content: "\f316"; | |
| font-size: 32px; } | |
| .spoticon-device-multispeaker-48::before { | |
| content: "\f42B"; | |
| font-size: 48px; } | |
| .spoticon-device-multispeaker-64::before { | |
| content: "\f3EB"; | |
| font-size: 64px; } | |
| .spoticon-device-other-16::before { | |
| content: "\f29F"; | |
| font-size: 16px; } | |
| .spoticon-device-other-24::before { | |
| content: "\f3D2"; | |
| font-size: 24px; } | |
| .spoticon-device-other-32::before { | |
| content: "\f300"; | |
| font-size: 32px; } | |
| .spoticon-device-other-48::before { | |
| content: "\f42C"; | |
| font-size: 48px; } | |
| .spoticon-device-other-64::before { | |
| content: "\f3EC"; | |
| font-size: 64px; } | |
| .spoticon-device-speaker-16::before { | |
| content: "\f29D"; | |
| font-size: 16px; } | |
| .spoticon-device-speaker-24::before { | |
| content: "\f3D1"; | |
| font-size: 24px; } | |
| .spoticon-device-speaker-32::before { | |
| content: "\f29E"; | |
| font-size: 32px; } | |
| .spoticon-device-speaker-48::before { | |
| content: "\f42D"; | |
| font-size: 48px; } | |
| .spoticon-device-speaker-64::before { | |
| content: "\f3ED"; | |
| font-size: 64px; } | |
| .spoticon-device-tablet-16::before { | |
| content: "\f303"; | |
| font-size: 16px; } | |
| .spoticon-device-tablet-24::before { | |
| content: "\f3D4"; | |
| font-size: 24px; } | |
| .spoticon-device-tablet-32::before { | |
| content: "\f304"; | |
| font-size: 32px; } | |
| .spoticon-device-tablet-48::before { | |
| content: "\f42E"; | |
| font-size: 48px; } | |
| .spoticon-device-tablet-64::before { | |
| content: "\f3EE"; | |
| font-size: 64px; } | |
| .spoticon-device-tv-16::before { | |
| content: "\f307"; | |
| font-size: 16px; } | |
| .spoticon-device-tv-24::before { | |
| content: "\f3D6"; | |
| font-size: 24px; } | |
| .spoticon-device-tv-32::before { | |
| content: "\f308"; | |
| font-size: 32px; } | |
| .spoticon-device-tv-48::before { | |
| content: "\f42F"; | |
| font-size: 48px; } | |
| .spoticon-device-tv-64::before { | |
| content: "\f3EF"; | |
| font-size: 64px; } | |
| .spoticon-devices-16::before { | |
| content: "\f213"; | |
| font-size: 16px; } | |
| .spoticon-devices-24::before { | |
| content: "\f3BE"; | |
| font-size: 24px; } | |
| .spoticon-devices-32::before { | |
| content: "\f214"; | |
| font-size: 32px; } | |
| .spoticon-devices-48::before { | |
| content: "\f430"; | |
| font-size: 48px; } | |
| .spoticon-devices-64::before { | |
| content: "\f215"; | |
| font-size: 64px; } | |
| .spoticon-devices-alt-16::before { | |
| content: "\f385"; | |
| font-size: 16px; } | |
| .spoticon-devices-alt-24::before { | |
| content: "\f386"; | |
| font-size: 24px; } | |
| .spoticon-devices-alt-32::before { | |
| content: "\f387"; | |
| font-size: 32px; } | |
| .spoticon-devices-alt-48::before { | |
| content: "\f431"; | |
| font-size: 48px; } | |
| .spoticon-devices-alt-64::before { | |
| content: "\f388"; | |
| font-size: 64px; } | |
| .spoticon-discover-16::before { | |
| content: "\f172"; | |
| font-size: 16px; } | |
| .spoticon-discover-24::before { | |
| content: "\f3AD"; | |
| font-size: 24px; } | |
| .spoticon-discover-32::before { | |
| content: "\f173"; | |
| font-size: 32px; } | |
| .spoticon-discover-48::before { | |
| content: "\f432"; | |
| font-size: 48px; } | |
| .spoticon-discover-64::before { | |
| content: "\f174"; | |
| font-size: 64px; } | |
| .spoticon-download-16::before { | |
| content: "\f11a"; | |
| font-size: 16px; } | |
| .spoticon-download-24::before { | |
| content: "\f399"; | |
| font-size: 24px; } | |
| .spoticon-download-32::before { | |
| content: "\f11b"; | |
| font-size: 32px; } | |
| .spoticon-download-48::before { | |
| content: "\f433"; | |
| font-size: 48px; } | |
| .spoticon-download-64::before { | |
| content: "\f1B2"; | |
| font-size: 64px; } | |
| .spoticon-downloaded-16::before { | |
| content: "\f32C"; | |
| font-size: 16px; } | |
| .spoticon-downloaded-24::before { | |
| content: "\f3DF"; | |
| font-size: 24px; } | |
| .spoticon-downloaded-32::before { | |
| content: "\f32B"; | |
| font-size: 32px; } | |
| .spoticon-downloaded-48::before { | |
| content: "\f434"; | |
| font-size: 48px; } | |
| .spoticon-downloaded-64::before { | |
| content: "\f3F0"; | |
| font-size: 64px; } | |
| .spoticon-drag-and-drop-16::before { | |
| content: "\f331"; | |
| font-size: 16px; } | |
| .spoticon-drag-and-drop-24::before { | |
| content: "\f332"; | |
| font-size: 24px; } | |
| .spoticon-drag-and-drop-32::before { | |
| content: "\f333"; | |
| font-size: 32px; } | |
| .spoticon-drag-and-drop-48::before { | |
| content: "\f435"; | |
| font-size: 48px; } | |
| .spoticon-drag-and-drop-64::before { | |
| content: "\f334"; | |
| font-size: 64px; } | |
| .spoticon-edit-16::before { | |
| content: "\f1E2"; | |
| font-size: 16px; } | |
| .spoticon-edit-24::before { | |
| content: "\f3B9"; | |
| font-size: 24px; } | |
| .spoticon-edit-32::before { | |
| content: "\f1E3"; | |
| font-size: 32px; } | |
| .spoticon-edit-48::before { | |
| content: "\f436"; | |
| font-size: 48px; } | |
| .spoticon-edit-64::before { | |
| content: "\f1E4"; | |
| font-size: 64px; } | |
| .spoticon-email-16::before { | |
| content: "\f1E7"; | |
| font-size: 16px; } | |
| .spoticon-email-24::before { | |
| content: "\f49d"; | |
| font-size: 24px; } | |
| .spoticon-email-32::before { | |
| content: "\f1E8"; | |
| font-size: 32px; } | |
| .spoticon-email-48::before { | |
| content: "\f49e"; | |
| font-size: 48px; } | |
| .spoticon-email-64::before { | |
| content: "\f1F6"; | |
| font-size: 64px; } | |
| .spoticon-events-16::before { | |
| content: "\f1B3"; | |
| font-size: 16px; } | |
| .spoticon-events-24::before { | |
| content: "\f3B4"; | |
| font-size: 24px; } | |
| .spoticon-events-32::before { | |
| content: "\f1B4"; | |
| font-size: 32px; } | |
| .spoticon-events-48::before { | |
| content: "\f437"; | |
| font-size: 48px; } | |
| .spoticon-events-64::before { | |
| content: "\f1B5"; | |
| font-size: 64px; } | |
| .spoticon-facebook-16::before { | |
| content: "\f1E9"; | |
| font-size: 16px; } | |
| .spoticon-facebook-32::before { | |
| content: "\f1EA"; | |
| font-size: 32px; } | |
| .spoticon-facebook-64::before { | |
| content: "\f1F7"; | |
| font-size: 64px; } | |
| .spoticon-facebook-messenger-16::before { | |
| content: "\f313"; | |
| font-size: 16px; } | |
| .spoticon-facebook-messenger-32::before { | |
| content: "\f314"; | |
| font-size: 32px; } | |
| .spoticon-filter-16::before { | |
| content: "\f11c"; | |
| font-size: 16px; } | |
| .spoticon-filter-24::before { | |
| content: "\f39A"; | |
| font-size: 24px; } | |
| .spoticon-filter-32::before { | |
| content: "\f11d"; | |
| font-size: 32px; } | |
| .spoticon-filter-48::before { | |
| content: "\f438"; | |
| font-size: 48px; } | |
| .spoticon-filter-64::before { | |
| content: "\f3F1"; | |
| font-size: 64px; } | |
| .spoticon-flag-16::before { | |
| content: "\f11e"; | |
| font-size: 16px; } | |
| .spoticon-flag-24::before { | |
| content: "\f49b"; | |
| font-size: 24px; } | |
| .spoticon-flag-32::before { | |
| content: "\f11f"; | |
| font-size: 32px; } | |
| .spoticon-flag-48::before { | |
| content: "\f49c"; | |
| font-size: 48px; } | |
| .spoticon-flag-64::before { | |
| content: "\f175"; | |
| font-size: 64px; } | |
| .spoticon-follow-16::before { | |
| content: "\f120"; | |
| font-size: 16px; } | |
| .spoticon-follow-24::before { | |
| content: "\f39B"; | |
| font-size: 24px; } | |
| .spoticon-follow-32::before { | |
| content: "\f121"; | |
| font-size: 32px; } | |
| .spoticon-follow-48::before { | |
| content: "\f439"; | |
| font-size: 48px; } | |
| .spoticon-follow-64::before { | |
| content: "\f176"; | |
| font-size: 64px; } | |
| .spoticon-fullscreen-16::before { | |
| content: "\f28C"; | |
| font-size: 16px; } | |
| .spoticon-fullscreen-24::before { | |
| content: "\f3CE"; | |
| font-size: 24px; } | |
| .spoticon-fullscreen-32::before { | |
| content: "\f28D"; | |
| font-size: 32px; } | |
| .spoticon-fullscreen-48::before { | |
| content: "\f43A"; | |
| font-size: 48px; } | |
| .spoticon-fullscreen-64::before { | |
| content: "\f3F2"; | |
| font-size: 64px; } | |
| .spoticon-games-console-16::before { | |
| content: "\f253"; | |
| font-size: 16px; } | |
| .spoticon-games-console-24::before { | |
| content: "\f3C6"; | |
| font-size: 24px; } | |
| .spoticon-games-console-32::before { | |
| content: "\f254"; | |
| font-size: 32px; } | |
| .spoticon-games-console-48::before { | |
| content: "\f43B"; | |
| font-size: 48px; } | |
| .spoticon-games-console-64::before { | |
| content: "\f3F3"; | |
| font-size: 64px; } | |
| .spoticon-gears-16::before { | |
| content: "\f122"; | |
| font-size: 16px; } | |
| .spoticon-gears-24::before { | |
| content: "\f39C"; | |
| font-size: 24px; } | |
| .spoticon-gears-32::before { | |
| content: "\f123"; | |
| font-size: 32px; } | |
| .spoticon-gears-48::before { | |
| content: "\f43C"; | |
| font-size: 48px; } | |
| .spoticon-gears-64::before { | |
| content: "\f177"; | |
| font-size: 64px; } | |
| .spoticon-googleplus-16::before { | |
| content: "\f244"; | |
| font-size: 16px; } | |
| .spoticon-googleplus-32::before { | |
| content: "\f245"; | |
| font-size: 32px; } | |
| .spoticon-grid-view-16::before { | |
| content: "\f178"; | |
| font-size: 16px; } | |
| .spoticon-grid-view-24::before { | |
| content: "\f1CA"; | |
| font-size: 24px; } | |
| .spoticon-grid-view-32::before { | |
| content: "\f179"; | |
| font-size: 32px; } | |
| .spoticon-grid-view-48::before { | |
| content: "\f43D"; | |
| font-size: 48px; } | |
| .spoticon-grid-view-64::before { | |
| content: "\f17A"; | |
| font-size: 64px; } | |
| .spoticon-headphones-16::before { | |
| content: "\f335"; | |
| font-size: 16px; } | |
| .spoticon-headphones-24::before { | |
| content: "\f336"; | |
| font-size: 24px; } | |
| .spoticon-headphones-32::before { | |
| content: "\f337"; | |
| font-size: 32px; } | |
| .spoticon-headphones-48::before { | |
| content: "\f43E"; | |
| font-size: 48px; } | |
| .spoticon-headphones-64::before { | |
| content: "\f338"; | |
| font-size: 64px; } | |
| .spoticon-heart-16::before { | |
| content: "\f320"; | |
| font-size: 16px; } | |
| .spoticon-heart-24::before { | |
| content: "\f3DB"; | |
| font-size: 24px; } | |
| .spoticon-heart-32::before { | |
| content: "\f31F"; | |
| font-size: 32px; } | |
| .spoticon-heart-48::before { | |
| content: "\f43F"; | |
| font-size: 48px; } | |
| .spoticon-heart-64::before { | |
| content: "\f3F4"; | |
| font-size: 64px; } | |
| .spoticon-heart-active-16::before { | |
| content: "\f322"; | |
| font-size: 16px; } | |
| .spoticon-heart-active-24::before { | |
| content: "\f3DC"; | |
| font-size: 24px; } | |
| .spoticon-heart-active-32::before { | |
| content: "\f321"; | |
| font-size: 32px; } | |
| .spoticon-heart-active-48::before { | |
| content: "\f440"; | |
| font-size: 48px; } | |
| .spoticon-heart-active-64::before { | |
| content: "\f3F5"; | |
| font-size: 64px; } | |
| .spoticon-helpcircle-16::before { | |
| content: "\f23B"; | |
| font-size: 16px; } | |
| .spoticon-helpcircle-24::before { | |
| content: "\f39E"; | |
| font-size: 24px; } | |
| .spoticon-helpcircle-32::before { | |
| content: "\f23C"; | |
| font-size: 32px; } | |
| .spoticon-helpcircle-48::before { | |
| content: "\f441"; | |
| font-size: 48px; } | |
| .spoticon-highlight-16::before { | |
| content: "\f247"; | |
| font-size: 16px; } | |
| .spoticon-highlight-32::before { | |
| content: "\f248"; | |
| font-size: 32px; } | |
| .spoticon-home-16::before { | |
| content: "\f1B6"; | |
| font-size: 16px; } | |
| .spoticon-home-24::before { | |
| content: "\f3B5"; | |
| font-size: 24px; } | |
| .spoticon-home-32::before { | |
| content: "\f1B7"; | |
| font-size: 32px; } | |
| .spoticon-home-48::before { | |
| content: "\f442"; | |
| font-size: 48px; } | |
| .spoticon-home-64::before { | |
| content: "\f1B8"; | |
| font-size: 64px; } | |
| .spoticon-home-active-16::before { | |
| content: "\f36D"; | |
| font-size: 16px; } | |
| .spoticon-home-active-24::before { | |
| content: "\f36E"; | |
| font-size: 24px; } | |
| .spoticon-home-active-32::before { | |
| content: "\f36F"; | |
| font-size: 32px; } | |
| .spoticon-home-active-48::before { | |
| content: "\f443"; | |
| font-size: 48px; } | |
| .spoticon-home-active-64::before { | |
| content: "\f370"; | |
| font-size: 64px; } | |
| .spoticon-inbox-16::before { | |
| content: "\f124"; | |
| font-size: 16px; } | |
| .spoticon-inbox-24::before { | |
| content: "\f39D"; | |
| font-size: 24px; } | |
| .spoticon-inbox-32::before { | |
| content: "\f125"; | |
| font-size: 32px; } | |
| .spoticon-inbox-48::before { | |
| content: "\f444"; | |
| font-size: 48px; } | |
| .spoticon-inbox-64::before { | |
| content: "\f17B"; | |
| font-size: 64px; } | |
| .spoticon-info-16::before { | |
| content: "\f126"; | |
| font-size: 16px; } | |
| .spoticon-info-32::before { | |
| content: "\f127"; | |
| font-size: 32px; } | |
| .spoticon-instagram-16::before { | |
| content: "\f4e7"; | |
| font-size: 16px; } | |
| .spoticon-instagram-24::before { | |
| content: "\f4e8"; | |
| font-size: 24px; } | |
| .spoticon-instagram-32::before { | |
| content: "\f4e9"; | |
| font-size: 32px; } | |
| .spoticon-instagram-48::before { | |
| content: "\f4ea"; | |
| font-size: 48px; } | |
| .spoticon-instagram-64::before { | |
| content: "\f4eb"; | |
| font-size: 64px; } | |
| .spoticon-library-16::before { | |
| content: "\f20A"; | |
| font-size: 16px; } | |
| .spoticon-library-32::before { | |
| content: "\f20B"; | |
| font-size: 32px; } | |
| .spoticon-library-64::before { | |
| content: "\f20C"; | |
| font-size: 64px; } | |
| .spoticon-lightning-16::before { | |
| content: "\f4ba"; | |
| font-size: 16px; } | |
| .spoticon-lightning-24::before { | |
| content: "\f4bb"; | |
| font-size: 24px; } | |
| .spoticon-lightning-32::before { | |
| content: "\f4bc"; | |
| font-size: 32px; } | |
| .spoticon-lightning-48::before { | |
| content: "\f4bd"; | |
| font-size: 48px; } | |
| .spoticon-lightning-64::before { | |
| content: "\f4be"; | |
| font-size: 64px; } | |
| .spoticon-line-16::before { | |
| content: "\f319"; | |
| font-size: 16px; } | |
| .spoticon-line-32::before { | |
| content: "\f31A"; | |
| font-size: 32px; } | |
| .spoticon-list-view-16::before { | |
| content: "\f17C"; | |
| font-size: 16px; } | |
| .spoticon-list-view-24::before { | |
| content: "\f1CB"; | |
| font-size: 24px; } | |
| .spoticon-list-view-32::before { | |
| content: "\f17D"; | |
| font-size: 32px; } | |
| .spoticon-list-view-48::before { | |
| content: "\f445"; | |
| font-size: 48px; } | |
| .spoticon-list-view-64::before { | |
| content: "\f17E"; | |
| font-size: 64px; } | |
| .spoticon-localfile-16::before { | |
| content: "\f1FA"; | |
| font-size: 16px; } | |
| .spoticon-localfile-24::before { | |
| content: "\f3BC"; | |
| font-size: 24px; } | |
| .spoticon-localfile-32::before { | |
| content: "\f1FB"; | |
| font-size: 32px; } | |
| .spoticon-localfile-48::before { | |
| content: "\f446"; | |
| font-size: 48px; } | |
| .spoticon-localfile-64::before { | |
| content: "\f1FC"; | |
| font-size: 64px; } | |
| .spoticon-locked-16::before { | |
| content: "\f128"; | |
| font-size: 16px; } | |
| .spoticon-locked-24::before { | |
| content: "\f39F"; | |
| font-size: 24px; } | |
| .spoticon-locked-32::before { | |
| content: "\f129"; | |
| font-size: 32px; } | |
| .spoticon-locked-48::before { | |
| content: "\f447"; | |
| font-size: 48px; } | |
| .spoticon-locked-64::before { | |
| content: "\f17F"; | |
| font-size: 64px; } | |
| .spoticon-locked-active-16::before { | |
| content: "\f4b5"; | |
| font-size: 16px; } | |
| .spoticon-locked-active-24::before { | |
| content: "\f4b6"; | |
| font-size: 24px; } | |
| .spoticon-locked-active-32::before { | |
| content: "\f4b7"; | |
| font-size: 32px; } | |
| .spoticon-locked-active-48::before { | |
| content: "\f4b8"; | |
| font-size: 48px; } | |
| .spoticon-locked-active-64::before { | |
| content: "\f4b9"; | |
| font-size: 64px; } | |
| .spoticon-lyrics-16::before { | |
| content: "\f32A"; | |
| font-size: 16px; } | |
| .spoticon-lyrics-24::before { | |
| content: "\f339"; | |
| font-size: 24px; } | |
| .spoticon-lyrics-32::before { | |
| content: "\f329"; | |
| font-size: 32px; } | |
| .spoticon-lyrics-48::before { | |
| content: "\f448"; | |
| font-size: 48px; } | |
| .spoticon-lyrics-64::before { | |
| content: "\f33A"; | |
| font-size: 64px; } | |
| .spoticon-make-available-offline-48::before { | |
| content: "\f449"; | |
| font-size: 48px; } | |
| .spoticon-make—available-offline-16::before { | |
| content: "\f33D"; | |
| font-size: 16px; } | |
| .spoticon-make—available-offline-24::before { | |
| content: "\f33E"; | |
| font-size: 24px; } | |
| .spoticon-make—available-offline-32::before { | |
| content: "\f33F"; | |
| font-size: 32px; } | |
| .spoticon-make—available-offline-64::before { | |
| content: "\f340"; | |
| font-size: 64px; } | |
| .spoticon-me-alt-48::before { | |
| content: "\f44A"; | |
| font-size: 48px; } | |
| .spoticon-me-alt-active-48::before { | |
| content: "\f44B"; | |
| font-size: 48px; } | |
| .spoticon-menu-16::before { | |
| content: "\f1FD"; | |
| font-size: 16px; } | |
| .spoticon-menu-24::before { | |
| content: "\f3BD"; | |
| font-size: 24px; } | |
| .spoticon-menu-32::before { | |
| content: "\f1FE"; | |
| font-size: 32px; } | |
| .spoticon-menu-48::before { | |
| content: "\f44C"; | |
| font-size: 48px; } | |
| .spoticon-menu-64::before { | |
| content: "\f1FF"; | |
| font-size: 64px; } | |
| .spoticon-messages-16::before { | |
| content: "\f12a"; | |
| font-size: 16px; } | |
| .spoticon-messages-24::before { | |
| content: "\f3A0"; | |
| font-size: 24px; } | |
| .spoticon-messages-32::before { | |
| content: "\f12b"; | |
| font-size: 32px; } | |
| .spoticon-messages-48::before { | |
| content: "\f44D"; | |
| font-size: 48px; } | |
| .spoticon-messages-64::before { | |
| content: "\f180"; | |
| font-size: 64px; } | |
| .spoticon-mic-16::before { | |
| content: "\f341"; | |
| font-size: 16px; } | |
| .spoticon-mic-24::before { | |
| content: "\f342"; | |
| font-size: 24px; } | |
| .spoticon-mic-32::before { | |
| content: "\f343"; | |
| font-size: 32px; } | |
| .spoticon-mic-48::before { | |
| content: "\f44E"; | |
| font-size: 48px; } | |
| .spoticon-mic-64::before { | |
| content: "\f344"; | |
| font-size: 64px; } | |
| .spoticon-minimise-16::before { | |
| content: "\f268"; | |
| font-size: 16px; } | |
| .spoticon-minimise-24::before { | |
| content: "\f3CB"; | |
| font-size: 24px; } | |
| .spoticon-minimise-32::before { | |
| content: "\f269"; | |
| font-size: 32px; } | |
| .spoticon-minimise-48::before { | |
| content: "\f44F"; | |
| font-size: 48px; } | |
| .spoticon-minimise-64::before { | |
| content: "\f3F6"; | |
| font-size: 64px; } | |
| .spoticon-mix-16::before { | |
| content: "\f326"; | |
| font-size: 16px; } | |
| .spoticon-mix-24::before { | |
| content: "\f3DD"; | |
| font-size: 24px; } | |
| .spoticon-mix-32::before { | |
| content: "\f325"; | |
| font-size: 32px; } | |
| .spoticon-mix-48::before { | |
| content: "\f450"; | |
| font-size: 48px; } | |
| .spoticon-mix-64::before { | |
| content: "\f3F7"; | |
| font-size: 64px; } | |
| .spoticon-more-16::before { | |
| content: "\f12c"; | |
| font-size: 16px; } | |
| .spoticon-more-24::before { | |
| content: "\f1CC"; | |
| font-size: 24px; } | |
| .spoticon-more-32::before { | |
| content: "\f12d"; | |
| font-size: 32px; } | |
| .spoticon-more-48::before { | |
| content: "\f451"; | |
| font-size: 48px; } | |
| .spoticon-more-64::before { | |
| content: "\f181"; | |
| font-size: 64px; } | |
| .spoticon-more-alt-48::before { | |
| content: "\f452"; | |
| font-size: 48px; } | |
| .spoticon-more-android-16::before { | |
| content: "\f219"; | |
| font-size: 16px; } | |
| .spoticon-more-android-24::before { | |
| content: "\f21A"; | |
| font-size: 24px; } | |
| .spoticon-more-android-32::before { | |
| content: "\f21B"; | |
| font-size: 32px; } | |
| .spoticon-more-android-48::before { | |
| content: "\f48a"; | |
| font-size: 48px; } | |
| .spoticon-more-android-64::before { | |
| content: "\f21C"; | |
| font-size: 64px; } | |
| .spoticon-new-spotify-connect-16::before { | |
| content: "\f1CD"; | |
| font-size: 16px; } | |
| .spoticon-new-spotify-connect-24::before { | |
| content: "\f3B8"; | |
| font-size: 24px; } | |
| .spoticon-new-spotify-connect-32::before { | |
| content: "\f1CE"; | |
| font-size: 32px; } | |
| .spoticon-new-spotify-connect-64::before { | |
| content: "\f1CF"; | |
| font-size: 64px; } | |
| .spoticon-new-volume-16::before { | |
| content: "\f1D0"; | |
| font-size: 16px; } | |
| .spoticon-new-volume-24::before { | |
| content: "\f1D1"; | |
| font-size: 24px; } | |
| .spoticon-newradio-16::before { | |
| content: "\f220"; | |
| font-size: 16px; } | |
| .spoticon-newradio-24::before { | |
| content: "\f3C0"; | |
| font-size: 24px; } | |
| .spoticon-newradio-32::before { | |
| content: "\f221"; | |
| font-size: 32px; } | |
| .spoticon-newradio-48::before { | |
| content: "\f453"; | |
| font-size: 48px; } | |
| .spoticon-newradio-64::before { | |
| content: "\f222"; | |
| font-size: 64px; } | |
| .spoticon-nikeplus-16::before { | |
| content: "\f274"; | |
| font-size: 16px; } | |
| .spoticon-nikeplus-32::before { | |
| content: "\f275"; | |
| font-size: 32px; } | |
| .spoticon-notifications-16::before { | |
| content: "\f12e"; | |
| font-size: 16px; } | |
| .spoticon-notifications-24::before { | |
| content: "\f3A1"; | |
| font-size: 24px; } | |
| .spoticon-notifications-32::before { | |
| content: "\f12f"; | |
| font-size: 32px; } | |
| .spoticon-notifications-48::before { | |
| content: "\f454"; | |
| font-size: 48px; } | |
| .spoticon-notifications-64::before { | |
| content: "\f182"; | |
| font-size: 64px; } | |
| .spoticon-now-playing-16::before { | |
| content: "\f345"; | |
| font-size: 16px; } | |
| .spoticon-now-playing-24::before { | |
| content: "\f346"; | |
| font-size: 24px; } | |
| .spoticon-now-playing-32::before { | |
| content: "\f347"; | |
| font-size: 32px; } | |
| .spoticon-now-playing-48::before { | |
| content: "\f455"; | |
| font-size: 48px; } | |
| .spoticon-now-playing-64::before { | |
| content: "\f348"; | |
| font-size: 64px; } | |
| .spoticon-now-playing-active-16::before { | |
| content: "\f37D"; | |
| font-size: 16px; } | |
| .spoticon-now-playing-active-24::before { | |
| content: "\f37E"; | |
| font-size: 24px; } | |
| .spoticon-now-playing-active-32::before { | |
| content: "\f37F"; | |
| font-size: 32px; } | |
| .spoticon-now-playing-active-48::before { | |
| content: "\f456"; | |
| font-size: 48px; } | |
| .spoticon-now-playing-active-64::before { | |
| content: "\f380"; | |
| font-size: 64px; } | |
| .spoticon-offline-16::before { | |
| content: "\f21D"; | |
| font-size: 16px; } | |
| .spoticon-offline-24::before { | |
| content: "\f3BF"; | |
| font-size: 24px; } | |
| .spoticon-offline-32::before { | |
| content: "\f21E"; | |
| font-size: 32px; } | |
| .spoticon-offline-48::before { | |
| content: "\f457"; | |
| font-size: 48px; } | |
| .spoticon-offline-64::before { | |
| content: "\f21F"; | |
| font-size: 64px; } | |
| .spoticon-offline-sync-16::before { | |
| content: "\f1B9"; | |
| font-size: 16px; } | |
| .spoticon-offline-sync-24::before { | |
| content: "\f3B6"; | |
| font-size: 24px; } | |
| .spoticon-offline-sync-32::before { | |
| content: "\f1BA"; | |
| font-size: 32px; } | |
| .spoticon-offline-sync-48::before { | |
| content: "\f458"; | |
| font-size: 48px; } | |
| .spoticon-offline-sync-64::before { | |
| content: "\f1BB"; | |
| font-size: 64px; } | |
| .spoticon-pause-16::before { | |
| content: "\f130"; | |
| font-size: 16px; } | |
| .spoticon-pause-24::before { | |
| content: "\f1D3"; | |
| font-size: 24px; } | |
| .spoticon-pause-32::before { | |
| content: "\f131"; | |
| font-size: 32px; } | |
| .spoticon-pause-48::before { | |
| content: "\f459"; | |
| font-size: 48px; } | |
| .spoticon-pause-64::before { | |
| content: "\f189"; | |
| font-size: 64px; } | |
| .spoticon-payment-16::before { | |
| content: "\f241"; | |
| font-size: 16px; } | |
| .spoticon-payment-32::before { | |
| content: "\f242"; | |
| font-size: 32px; } | |
| .spoticon-paymenthistory-16::before { | |
| content: "\f24A"; | |
| font-size: 16px; } | |
| .spoticon-paymenthistory-32::before { | |
| content: "\f24B"; | |
| font-size: 32px; } | |
| .spoticon-play-16::before { | |
| content: "\f132"; | |
| font-size: 16px; } | |
| .spoticon-play-24::before { | |
| content: "\f1C8"; | |
| font-size: 24px; } | |
| .spoticon-play-32::before { | |
| content: "\f133"; | |
| font-size: 32px; } | |
| .spoticon-play-48::before { | |
| content: "\f45A"; | |
| font-size: 48px; } | |
| .spoticon-play-64::before { | |
| content: "\f18A"; | |
| font-size: 64px; } | |
| .spoticon-playback-speed-0point5x-16::before { | |
| content: "\f4c4"; | |
| font-size: 16px; } | |
| .spoticon-playback-speed-0point5x-24::before { | |
| content: "\f4c5"; | |
| font-size: 24px; } | |
| .spoticon-playback-speed-0point5x-32::before { | |
| content: "\f4c6"; | |
| font-size: 32px; } | |
| .spoticon-playback-speed-0point5x-48::before { | |
| content: "\f4c7"; | |
| font-size: 48px; } | |
| .spoticon-playback-speed-0point5x-64::before { | |
| content: "\f4c8"; | |
| font-size: 64px; } | |
| .spoticon-playback-speed-0point8x-16::before { | |
| content: "\f4c9"; | |
| font-size: 16px; } | |
| .spoticon-playback-speed-0point8x-24::before { | |
| content: "\f4ca"; | |
| font-size: 24px; } | |
| .spoticon-playback-speed-0point8x-32::before { | |
| content: "\f4cb"; | |
| font-size: 32px; } | |
| .spoticon-playback-speed-0point8x-48::before { | |
| content: "\f4cc"; | |
| font-size: 48px; } | |
| .spoticon-playback-speed-0point8x-64::before { | |
| content: "\f4cd"; | |
| font-size: 64px; } | |
| .spoticon-playback-speed-1point2x-16::before { | |
| content: "\f4d3"; | |
| font-size: 16px; } | |
| .spoticon-playback-speed-1point2x-24::before { | |
| content: "\f4d4"; | |
| font-size: 24px; } | |
| .spoticon-playback-speed-1point2x-32::before { | |
| content: "\f4d5"; | |
| font-size: 32px; } | |
| .spoticon-playback-speed-1point2x-48::before { | |
| content: "\f4d6"; | |
| font-size: 48px; } | |
| .spoticon-playback-speed-1point2x-64::before { | |
| content: "\f4d7"; | |
| font-size: 64px; } | |
| .spoticon-playback-speed-1point5x-16::before { | |
| content: "\f4d8"; | |
| font-size: 16px; } | |
| .spoticon-playback-speed-1point5x-24::before { | |
| content: "\f4d9"; | |
| font-size: 24px; } | |
| .spoticon-playback-speed-1point5x-32::before { | |
| content: "\f4da"; | |
| font-size: 32px; } | |
| .spoticon-playback-speed-1point5x-48::before { | |
| content: "\f4db"; | |
| font-size: 48px; } | |
| .spoticon-playback-speed-1point5x-64::before { | |
| content: "\f4dc"; | |
| font-size: 64px; } | |
| .spoticon-playback-speed-1x-16::before { | |
| content: "\f4ce"; | |
| font-size: 16px; } | |
| .spoticon-playback-speed-1x-24::before { | |
| content: "\f4cf"; | |
| font-size: 24px; } | |
| .spoticon-playback-speed-1x-32::before { | |
| content: "\f4d0"; | |
| font-size: 32px; } | |
| .spoticon-playback-speed-1x-48::before { | |
| content: "\f4d1"; | |
| font-size: 48px; } | |
| .spoticon-playback-speed-1x-64::before { | |
| content: "\f4d2"; | |
| font-size: 64px; } | |
| .spoticon-playback-speed-2x-16::before { | |
| content: "\f4dd"; | |
| font-size: 16px; } | |
| .spoticon-playback-speed-2x-24::before { | |
| content: "\f4de"; | |
| font-size: 24px; } | |
| .spoticon-playback-speed-2x-32::before { | |
| content: "\f4df"; | |
| font-size: 32px; } | |
| .spoticon-playback-speed-2x-48::before { | |
| content: "\f4e0"; | |
| font-size: 48px; } | |
| .spoticon-playback-speed-2x-64::before { | |
| content: "\f4e1"; | |
| font-size: 64px; } | |
| .spoticon-playback-speed-3x-16::before { | |
| content: "\f4e2"; | |
| font-size: 16px; } | |
| .spoticon-playback-speed-3x-24::before { | |
| content: "\f4e3"; | |
| font-size: 24px; } | |
| .spoticon-playback-speed-3x-32::before { | |
| content: "\f4e4"; | |
| font-size: 32px; } | |
| .spoticon-playback-speed-3x-48::before { | |
| content: "\f4e5"; | |
| font-size: 48px; } | |
| .spoticon-playback-speed-3x-64::before { | |
| content: "\f4e6"; | |
| font-size: 64px; } | |
| .spoticon-playlist-16::before { | |
| content: "\f134"; | |
| font-size: 16px; } | |
| .spoticon-playlist-24::before { | |
| content: "\f3A2"; | |
| font-size: 24px; } | |
| .spoticon-playlist-32::before { | |
| content: "\f135"; | |
| font-size: 32px; } | |
| .spoticon-playlist-48::before { | |
| content: "\f45B"; | |
| font-size: 48px; } | |
| .spoticon-playlist-64::before { | |
| content: "\f18E"; | |
| font-size: 64px; } | |
| .spoticon-playlist-folder-16::before { | |
| content: "\f136"; | |
| font-size: 16px; } | |
| .spoticon-playlist-folder-24::before { | |
| content: "\f4a4"; | |
| font-size: 24px; } | |
| .spoticon-playlist-folder-32::before { | |
| content: "\f137"; | |
| font-size: 32px; } | |
| .spoticon-playlist-folder-48::before { | |
| content: "\f4a5"; | |
| font-size: 48px; } | |
| .spoticon-playlist-folder-64::before { | |
| content: "\f1C3"; | |
| font-size: 64px; } | |
| .spoticon-plus-16::before { | |
| content: "\f138"; | |
| font-size: 16px; } | |
| .spoticon-plus-24::before { | |
| content: "\f1C6"; | |
| font-size: 24px; } | |
| .spoticon-plus-2px-16::before { | |
| content: "\f15b"; | |
| font-size: 16px; } | |
| .spoticon-plus-2px-24::before { | |
| content: "\f162"; | |
| font-size: 24px; } | |
| .spoticon-plus-2px-32::before { | |
| content: "\f163"; | |
| font-size: 32px; } | |
| .spoticon-plus-32::before { | |
| content: "\f139"; | |
| font-size: 32px; } | |
| .spoticon-plus-48::before { | |
| content: "\f45C"; | |
| font-size: 48px; } | |
| .spoticon-plus-64::before { | |
| content: "\f18F"; | |
| font-size: 64px; } | |
| .spoticon-plus-alt-16::before { | |
| content: "\f349"; | |
| font-size: 16px; } | |
| .spoticon-plus-alt-24::before { | |
| content: "\f34A"; | |
| font-size: 24px; } | |
| .spoticon-plus-alt-32::before { | |
| content: "\f34B"; | |
| font-size: 32px; } | |
| .spoticon-plus-alt-48::before { | |
| content: "\f45D"; | |
| font-size: 48px; } | |
| .spoticon-plus-alt-64::before { | |
| content: "\f34C"; | |
| font-size: 64px; } | |
| .spoticon-podcasts-16::before { | |
| content: "\f238"; | |
| font-size: 16px; } | |
| .spoticon-podcasts-24::before { | |
| content: "\f3C5"; | |
| font-size: 24px; } | |
| .spoticon-podcasts-32::before { | |
| content: "\f239"; | |
| font-size: 32px; } | |
| .spoticon-podcasts-48::before { | |
| content: "\f45E"; | |
| font-size: 48px; } | |
| .spoticon-podcasts-64::before { | |
| content: "\f23A"; | |
| font-size: 64px; } | |
| .spoticon-podcasts-active-16::before { | |
| content: "\f4b0"; | |
| font-size: 16px; } | |
| .spoticon-podcasts-active-24::before { | |
| content: "\f4b1"; | |
| font-size: 24px; } | |
| .spoticon-podcasts-active-32::before { | |
| content: "\f4b2"; | |
| font-size: 32px; } | |
| .spoticon-podcasts-active-48::before { | |
| content: "\f4b3"; | |
| font-size: 48px; } | |
| .spoticon-podcasts-active-64::before { | |
| content: "\f4b4"; | |
| font-size: 64px; } | |
| .spoticon-public-16::before { | |
| content: "\f190"; | |
| font-size: 16px; } | |
| .spoticon-public-32::before { | |
| content: "\f191"; | |
| font-size: 32px; } | |
| .spoticon-queue-16::before { | |
| content: "\f13a"; | |
| font-size: 16px; } | |
| .spoticon-queue-24::before { | |
| content: "\f3A3"; | |
| font-size: 24px; } | |
| .spoticon-queue-32::before { | |
| content: "\f13b"; | |
| font-size: 32px; } | |
| .spoticon-queue-48::before { | |
| content: "\f45F"; | |
| font-size: 48px; } | |
| .spoticon-queue-64::before { | |
| content: "\f193"; | |
| font-size: 64px; } | |
| .spoticon-queue-number-48::before { | |
| content: "\f460"; | |
| font-size: 48px; } | |
| .spoticon-radio-16::before { | |
| content: "\f13c"; | |
| font-size: 16px; } | |
| .spoticon-radio-24::before { | |
| content: "\f1C7"; | |
| font-size: 24px; } | |
| .spoticon-radio-32::before { | |
| content: "\f13d"; | |
| font-size: 32px; } | |
| .spoticon-radio-48::before { | |
| content: "\f461"; | |
| font-size: 48px; } | |
| .spoticon-radio-64::before { | |
| content: "\f194"; | |
| font-size: 64px; } | |
| .spoticon-radio-active-16::before { | |
| content: "\f381"; | |
| font-size: 16px; } | |
| .spoticon-radio-active-24::before { | |
| content: "\f382"; | |
| font-size: 24px; } | |
| .spoticon-radio-active-32::before { | |
| content: "\f383"; | |
| font-size: 32px; } | |
| .spoticon-radio-active-48::before { | |
| content: "\f462"; | |
| font-size: 48px; } | |
| .spoticon-radio-active-64::before { | |
| content: "\f384"; | |
| font-size: 64px; } | |
| .spoticon-radioqueue-16::before { | |
| content: "\f26E"; | |
| font-size: 16px; } | |
| .spoticon-radioqueue-32::before { | |
| content: "\f26F"; | |
| font-size: 32px; } | |
| .spoticon-redeem-16::before { | |
| content: "\f24D"; | |
| font-size: 16px; } | |
| .spoticon-redeem-32::before { | |
| content: "\f24E"; | |
| font-size: 32px; } | |
| .spoticon-refresh-16::before { | |
| content: "\f195"; | |
| font-size: 16px; } | |
| .spoticon-refresh-24::before { | |
| content: "\f3B2"; | |
| font-size: 24px; } | |
| .spoticon-refresh-32::before { | |
| content: "\f196"; | |
| font-size: 32px; } | |
| .spoticon-refresh-48::before { | |
| content: "\f463"; | |
| font-size: 48px; } | |
| .spoticon-refresh-64::before { | |
| content: "\f197"; | |
| font-size: 64px; } | |
| .spoticon-released-16::before { | |
| content: "\f198"; | |
| font-size: 16px; } | |
| .spoticon-released-24::before { | |
| content: "\f3B3"; | |
| font-size: 24px; } | |
| .spoticon-released-32::before { | |
| content: "\f199"; | |
| font-size: 32px; } | |
| .spoticon-released-48::before { | |
| content: "\f464"; | |
| font-size: 48px; } | |
| .spoticon-released-64::before { | |
| content: "\f19A"; | |
| font-size: 64px; } | |
| .spoticon-released-alt-48::before { | |
| content: "\f465"; | |
| font-size: 48px; } | |
| .spoticon-repeat-16::before { | |
| content: "\f13e"; | |
| font-size: 16px; } | |
| .spoticon-repeat-24::before { | |
| content: "\f1D4"; | |
| font-size: 24px; } | |
| .spoticon-repeat-32::before { | |
| content: "\f13f"; | |
| font-size: 32px; } | |
| .spoticon-repeat-48::before { | |
| content: "\f466"; | |
| font-size: 48px; } | |
| .spoticon-repeat-64::before { | |
| content: "\f19B"; | |
| font-size: 64px; } | |
| .spoticon-repeatonce-16::before { | |
| content: "\f200"; | |
| font-size: 16px; } | |
| .spoticon-repeatonce-24::before { | |
| content: "\f201"; | |
| font-size: 24px; } | |
| .spoticon-repeatonce-32::before { | |
| content: "\f202"; | |
| font-size: 32px; } | |
| .spoticon-repeatonce-48::before { | |
| content: "\f467"; | |
| font-size: 48px; } | |
| .spoticon-repeatonce-64::before { | |
| content: "\f209"; | |
| font-size: 64px; } | |
| .spoticon-report-abuse-16::before { | |
| content: "\f261"; | |
| font-size: 16px; } | |
| .spoticon-report-abuse-24::before { | |
| content: "\f3C7"; | |
| font-size: 24px; } | |
| .spoticon-report-abuse-32::before { | |
| content: "\f256"; | |
| font-size: 32px; } | |
| .spoticon-report-abuse-48::before { | |
| content: "\f468"; | |
| font-size: 48px; } | |
| .spoticon-report-abuse-64::before { | |
| content: "\f3F8"; | |
| font-size: 64px; } | |
| .spoticon-running-16::before { | |
| content: "\f28F"; | |
| font-size: 16px; } | |
| .spoticon-running-32::before { | |
| content: "\f290"; | |
| font-size: 32px; } | |
| .spoticon-search-16::before { | |
| content: "\f140"; | |
| font-size: 16px; } | |
| .spoticon-search-24::before { | |
| content: "\f3A4"; | |
| font-size: 24px; } | |
| .spoticon-search-32::before { | |
| content: "\f141"; | |
| font-size: 32px; } | |
| .spoticon-search-48::before { | |
| content: "\f469"; | |
| font-size: 48px; } | |
| .spoticon-search-64::before { | |
| content: "\f19F"; | |
| font-size: 64px; } | |
| .spoticon-search-active-16::before { | |
| content: "\f371"; | |
| font-size: 16px; } | |
| .spoticon-search-active-24::before { | |
| content: "\f372"; | |
| font-size: 24px; } | |
| .spoticon-search-active-32::before { | |
| content: "\f373"; | |
| font-size: 32px; } | |
| .spoticon-search-active-48::before { | |
| content: "\f46A"; | |
| font-size: 48px; } | |
| .spoticon-search-active-64::before { | |
| content: "\f374"; | |
| font-size: 64px; } | |
| .spoticon-sendto-16::before { | |
| content: "\f232"; | |
| font-size: 16px; } | |
| .spoticon-sendto-32::before { | |
| content: "\f233"; | |
| font-size: 32px; } | |
| .spoticon-sendto-64::before { | |
| content: "\f234"; | |
| font-size: 64px; } | |
| .spoticon-share-16::before { | |
| content: "\f142"; | |
| font-size: 16px; } | |
| .spoticon-share-24::before { | |
| content: "\f3A5"; | |
| font-size: 24px; } | |
| .spoticon-share-32::before { | |
| content: "\f143"; | |
| font-size: 32px; } | |
| .spoticon-share-48::before { | |
| content: "\f46B"; | |
| font-size: 48px; } | |
| .spoticon-share-64::before { | |
| content: "\f1BC"; | |
| font-size: 64px; } | |
| .spoticon-share-android-16::before { | |
| content: "\f216"; | |
| font-size: 16px; } | |
| .spoticon-share-android-24::before { | |
| content: "\f48f"; | |
| font-size: 24px; } | |
| .spoticon-share-android-32::before { | |
| content: "\f217"; | |
| font-size: 32px; } | |
| .spoticon-share-android-48::before { | |
| content: "\f490"; | |
| font-size: 48px; } | |
| .spoticon-share-android-64::before { | |
| content: "\f218"; | |
| font-size: 64px; } | |
| .spoticon-sharetofollowers-16::before { | |
| content: "\f235"; | |
| font-size: 16px; } | |
| .spoticon-sharetofollowers-32::before { | |
| content: "\f236"; | |
| font-size: 32px; } | |
| .spoticon-sharetofollowers-64::before { | |
| content: "\f237"; | |
| font-size: 64px; } | |
| .spoticon-shows-16::before { | |
| content: "\f27D"; | |
| font-size: 16px; } | |
| .spoticon-shows-32::before { | |
| content: "\f27E"; | |
| font-size: 32px; } | |
| .spoticon-shuffle-16::before { | |
| content: "\f144"; | |
| font-size: 16px; } | |
| .spoticon-shuffle-24::before { | |
| content: "\f1D5"; | |
| font-size: 24px; } | |
| .spoticon-shuffle-32::before { | |
| content: "\f145"; | |
| font-size: 32px; } | |
| .spoticon-shuffle-48::before { | |
| content: "\f46C"; | |
| font-size: 48px; } | |
| .spoticon-shuffle-64::before { | |
| content: "\f1A0"; | |
| font-size: 64px; } | |
| .spoticon-skip-24::before { | |
| content: "\f3D9"; | |
| font-size: 24px; } | |
| .spoticon-skip-64::before { | |
| content: "\f3F9"; | |
| font-size: 64px; } | |
| .spoticon-skip-active-24::before { | |
| content: "\f3DA"; | |
| font-size: 24px; } | |
| .spoticon-skip-active-64::before { | |
| content: "\f3FA"; | |
| font-size: 64px; } | |
| .spoticon-skip-back-16::before { | |
| content: "\f146"; | |
| font-size: 16px; } | |
| .spoticon-skip-back-24::before { | |
| content: "\f1D6"; | |
| font-size: 24px; } | |
| .spoticon-skip-back-32::before { | |
| content: "\f147"; | |
| font-size: 32px; } | |
| .spoticon-skip-back-48::before { | |
| content: "\f46D"; | |
| font-size: 48px; } | |
| .spoticon-skip-back-64::before { | |
| content: "\f1A1"; | |
| font-size: 64px; } | |
| .spoticon-skip-forward-16::before { | |
| content: "\f148"; | |
| font-size: 16px; } | |
| .spoticon-skip-forward-24::before { | |
| content: "\f1D7"; | |
| font-size: 24px; } | |
| .spoticon-skip-forward-32::before { | |
| content: "\f149"; | |
| font-size: 32px; } | |
| .spoticon-skip-forward-48::before { | |
| content: "\f46E"; | |
| font-size: 48px; } | |
| .spoticon-skip-forward-64::before { | |
| content: "\f1A2"; | |
| font-size: 64px; } | |
| .spoticon-skipback15-16::before { | |
| content: "\f280"; | |
| font-size: 16px; } | |
| .spoticon-skipback15-24::before { | |
| content: "\f3CC"; | |
| font-size: 24px; } | |
| .spoticon-skipback15-32::before { | |
| content: "\f281"; | |
| font-size: 32px; } | |
| .spoticon-skipback15-48::before { | |
| content: "\f46F"; | |
| font-size: 48px; } | |
| .spoticon-skipback15-64::before { | |
| content: "\f3FB"; | |
| font-size: 64px; } | |
| .spoticon-skipforward15-16::before { | |
| content: "\f283"; | |
| font-size: 16px; } | |
| .spoticon-skipforward15-24::before { | |
| content: "\f3CD"; | |
| font-size: 24px; } | |
| .spoticon-skipforward15-32::before { | |
| content: "\f284"; | |
| font-size: 32px; } | |
| .spoticon-skipforward15-48::before { | |
| content: "\f470"; | |
| font-size: 48px; } | |
| .spoticon-skipforward15-64::before { | |
| content: "\f3FC"; | |
| font-size: 64px; } | |
| .spoticon-sleeptimer-16::before { | |
| content: "\f289"; | |
| font-size: 16px; } | |
| .spoticon-sleeptimer-32::before { | |
| content: "\f28A"; | |
| font-size: 32px; } | |
| .spoticon-sms-16::before { | |
| content: "\f1EB"; | |
| font-size: 16px; } | |
| .spoticon-sms-32::before { | |
| content: "\f1EC"; | |
| font-size: 32px; } | |
| .spoticon-sms-64::before { | |
| content: "\f1F8"; | |
| font-size: 64px; } | |
| .spoticon-sort-16::before { | |
| content: "\f223"; | |
| font-size: 16px; } | |
| .spoticon-sort-24::before { | |
| content: "\f3C1"; | |
| font-size: 24px; } | |
| .spoticon-sort-32::before { | |
| content: "\f224"; | |
| font-size: 32px; } | |
| .spoticon-sort-48::before { | |
| content: "\f471"; | |
| font-size: 48px; } | |
| .spoticon-sort-64::before { | |
| content: "\f225"; | |
| font-size: 64px; } | |
| .spoticon-sort-down-48::before { | |
| content: "\f472"; | |
| font-size: 48px; } | |
| .spoticon-sort-up-48::before { | |
| content: "\f473"; | |
| font-size: 48px; } | |
| .spoticon-sortdown-16::before { | |
| content: "\f226"; | |
| font-size: 16px; } | |
| .spoticon-sortdown-24::before { | |
| content: "\f3C2"; | |
| font-size: 24px; } | |
| .spoticon-sortdown-32::before { | |
| content: "\f227"; | |
| font-size: 32px; } | |
| .spoticon-sortdown-64::before { | |
| content: "\f228"; | |
| font-size: 64px; } | |
| .spoticon-sortup-16::before { | |
| content: "\f229"; | |
| font-size: 16px; } | |
| .spoticon-sortup-24::before { | |
| content: "\f3C3"; | |
| font-size: 24px; } | |
| .spoticon-sortup-32::before { | |
| content: "\f22A"; | |
| font-size: 32px; } | |
| .spoticon-sortup-64::before { | |
| content: "\f22B"; | |
| font-size: 64px; } | |
| .spoticon-spotify-connect-16::before { | |
| content: "\f1A3"; | |
| font-size: 16px; } | |
| .spoticon-spotify-connect-24::before { | |
| content: "\f1D8"; | |
| font-size: 24px; } | |
| .spoticon-spotify-connect-32::before { | |
| content: "\f1A4"; | |
| font-size: 32px; } | |
| .spoticon-spotify-connect-48::before { | |
| content: "\f474"; | |
| font-size: 48px; } | |
| .spoticon-spotify-connect-64::before { | |
| content: "\f1A5"; | |
| font-size: 64px; } | |
| .spoticon-spotify-connect-alt-16::before { | |
| content: "\f351"; | |
| font-size: 16px; } | |
| .spoticon-spotify-connect-alt-24::before { | |
| content: "\f352"; | |
| font-size: 24px; } | |
| .spoticon-spotify-connect-alt-32::before { | |
| content: "\f353"; | |
| font-size: 32px; } | |
| .spoticon-spotify-connect-alt-48::before { | |
| content: "\f475"; | |
| font-size: 48px; } | |
| .spoticon-spotify-connect-alt-64::before { | |
| content: "\f354"; | |
| font-size: 64px; } | |
| .spoticon-spotify-connect-onewave-48::before { | |
| content: "\f476"; | |
| font-size: 48px; } | |
| .spoticon-spotify-connect-onewave-64::before { | |
| content: "\f3FD"; | |
| font-size: 64px; } | |
| .spoticon-spotify-connect-twowave-48::before { | |
| content: "\f477"; | |
| font-size: 48px; } | |
| .spoticon-spotify-connect-twowave-64::before { | |
| content: "\f3FE"; | |
| font-size: 64px; } | |
| .spoticon-spotifylogo-16::before { | |
| content: "\f298"; | |
| font-size: 16px; } | |
| .spoticon-spotifylogo-24::before { | |
| content: "\f3CF"; | |
| font-size: 24px; } | |
| .spoticon-spotifylogo-32::before { | |
| content: "\f299"; | |
| font-size: 32px; } | |
| .spoticon-spotifylogo-48::before { | |
| content: "\f478"; | |
| font-size: 48px; } | |
| .spoticon-spotifylogo-64::before { | |
| content: "\f3FF"; | |
| font-size: 64px; } | |
| .spoticon-spotifypremium-16::before { | |
| content: "\f292"; | |
| font-size: 16px; } | |
| .spoticon-spotifypremium-32::before { | |
| content: "\f293"; | |
| font-size: 32px; } | |
| .spoticon-star-16::before { | |
| content: "\f14a"; | |
| font-size: 16px; } | |
| .spoticon-star-24::before { | |
| content: "\f3A6"; | |
| font-size: 24px; } | |
| .spoticon-star-32::before { | |
| content: "\f14b"; | |
| font-size: 32px; } | |
| .spoticon-star-48::before { | |
| content: "\f479"; | |
| font-size: 48px; } | |
| .spoticon-star-64::before { | |
| content: "\f1A6"; | |
| font-size: 64px; } | |
| .spoticon-star-alt-16::before { | |
| content: "\f4ab"; | |
| font-size: 16px; } | |
| .spoticon-star-alt-24::before { | |
| content: "\f4ac"; | |
| font-size: 24px; } | |
| .spoticon-star-alt-32::before { | |
| content: "\f4ad"; | |
| font-size: 32px; } | |
| .spoticon-star-alt-48::before { | |
| content: "\f4ae"; | |
| font-size: 48px; } | |
| .spoticon-star-alt-64::before { | |
| content: "\f4af"; | |
| font-size: 64px; } | |
| .spoticon-subtitles-16::before { | |
| content: "\f4bf"; | |
| font-size: 16px; } | |
| .spoticon-subtitles-24::before { | |
| content: "\f4c0"; | |
| font-size: 24px; } | |
| .spoticon-subtitles-32::before { | |
| content: "\f4c1"; | |
| font-size: 32px; } | |
| .spoticon-subtitles-48::before { | |
| content: "\f4c2"; | |
| font-size: 48px; } | |
| .spoticon-subtitles-64::before { | |
| content: "\f4c3"; | |
| font-size: 64px; } | |
| .spoticon-tag-16::before { | |
| content: "\f14c"; | |
| font-size: 16px; } | |
| .spoticon-tag-24::before { | |
| content: "\f3A7"; | |
| font-size: 24px; } | |
| .spoticon-tag-32::before { | |
| content: "\f14d"; | |
| font-size: 32px; } | |
| .spoticon-tag-48::before { | |
| content: "\f47A"; | |
| font-size: 48px; } | |
| .spoticon-tag-64::before { | |
| content: "\f400"; | |
| font-size: 64px; } | |
| .spoticon-thumbs-down-16::before { | |
| content: "\f14e"; | |
| font-size: 16px; } | |
| .spoticon-thumbs-down-24::before { | |
| content: "\f1D9"; | |
| font-size: 24px; } | |
| .spoticon-thumbs-down-32::before { | |
| content: "\f14f"; | |
| font-size: 32px; } | |
| .spoticon-thumbs-down-48::before { | |
| content: "\f47B"; | |
| font-size: 48px; } | |
| .spoticon-thumbs-down-64::before { | |
| content: "\f1A7"; | |
| font-size: 64px; } | |
| .spoticon-thumbs-up-16::before { | |
| content: "\f150"; | |
| font-size: 16px; } | |
| .spoticon-thumbs-up-24::before { | |
| content: "\f1DA"; | |
| font-size: 24px; } | |
| .spoticon-thumbs-up-32::before { | |
| content: "\f151"; | |
| font-size: 32px; } | |
| .spoticon-thumbs-up-48::before { | |
| content: "\f47C"; | |
| font-size: 48px; } | |
| .spoticon-thumbs-up-64::before { | |
| content: "\f1A8"; | |
| font-size: 64px; } | |
| .spoticon-time-16::before { | |
| content: "\f152"; | |
| font-size: 16px; } | |
| .spoticon-time-24::before { | |
| content: "\f3A8"; | |
| font-size: 24px; } | |
| .spoticon-time-32::before { | |
| content: "\f153"; | |
| font-size: 32px; } | |
| .spoticon-time-48::before { | |
| content: "\f47D"; | |
| font-size: 48px; } | |
| .spoticon-time-64::before { | |
| content: "\f1A9"; | |
| font-size: 64px; } | |
| .spoticon-topcountry-16::before { | |
| content: "\f27A"; | |
| font-size: 16px; } | |
| .spoticon-topcountry-32::before { | |
| content: "\f27B"; | |
| font-size: 32px; } | |
| .spoticon-track-16::before { | |
| content: "\f156"; | |
| font-size: 16px; } | |
| .spoticon-track-24::before { | |
| content: "\f3A9"; | |
| font-size: 24px; } | |
| .spoticon-track-32::before { | |
| content: "\f157"; | |
| font-size: 32px; } | |
| .spoticon-track-48::before { | |
| content: "\f47E"; | |
| font-size: 48px; } | |
| .spoticon-track-64::before { | |
| content: "\f1AA"; | |
| font-size: 64px; } | |
| .spoticon-trending-16::before { | |
| content: "\f158"; | |
| font-size: 16px; } | |
| .spoticon-trending-24::before { | |
| content: "\f3AA"; | |
| font-size: 24px; } | |
| .spoticon-trending-32::before { | |
| content: "\f159"; | |
| font-size: 32px; } | |
| .spoticon-trending-48::before { | |
| content: "\f47F"; | |
| font-size: 48px; } | |
| .spoticon-trending-64::before { | |
| content: "\f1AB"; | |
| font-size: 64px; } | |
| .spoticon-trending-active-16::before { | |
| content: "\f35D"; | |
| font-size: 16px; } | |
| .spoticon-trending-active-24::before { | |
| content: "\f35E"; | |
| font-size: 24px; } | |
| .spoticon-trending-active-32::before { | |
| content: "\f35F"; | |
| font-size: 32px; } | |
| .spoticon-trending-active-48::before { | |
| content: "\f480"; | |
| font-size: 48px; } | |
| .spoticon-trending-active-64::before { | |
| content: "\f360"; | |
| font-size: 64px; } | |
| .spoticon-tumblr-16::before { | |
| content: "\f250"; | |
| font-size: 16px; } | |
| .spoticon-tumblr-32::before { | |
| content: "\f251"; | |
| font-size: 32px; } | |
| .spoticon-twitter-16::before { | |
| content: "\f1ED"; | |
| font-size: 16px; } | |
| .spoticon-twitter-32::before { | |
| content: "\f1EE"; | |
| font-size: 32px; } | |
| .spoticon-twitter-64::before { | |
| content: "\f1F9"; | |
| font-size: 64px; } | |
| .spoticon-user-16::before { | |
| content: "\f15c"; | |
| font-size: 16px; } | |
| .spoticon-user-24::before { | |
| content: "\f3AB"; | |
| font-size: 24px; } | |
| .spoticon-user-32::before { | |
| content: "\f15d"; | |
| font-size: 32px; } | |
| .spoticon-user-48::before { | |
| content: "\f481"; | |
| font-size: 48px; } | |
| .spoticon-user-64::before { | |
| content: "\f1AF"; | |
| font-size: 64px; } | |
| .spoticon-user-active-16::before { | |
| content: "\f375"; | |
| font-size: 16px; } | |
| .spoticon-user-active-24::before { | |
| content: "\f376"; | |
| font-size: 24px; } | |
| .spoticon-user-active-32::before { | |
| content: "\f377"; | |
| font-size: 32px; } | |
| .spoticon-user-active-48::before { | |
| content: "\f482"; | |
| font-size: 48px; } | |
| .spoticon-user-active-64::before { | |
| content: "\f378"; | |
| font-size: 64px; } | |
| .spoticon-user-alt-16::before { | |
| content: "\f355"; | |
| font-size: 16px; } | |
| .spoticon-user-alt-24::before { | |
| content: "\f356"; | |
| font-size: 24px; } | |
| .spoticon-user-alt-32::before { | |
| content: "\f357"; | |
| font-size: 32px; } | |
| .spoticon-user-alt-48::before { | |
| content: "\f483"; | |
| font-size: 48px; } | |
| .spoticon-user-alt-64::before { | |
| content: "\f358"; | |
| font-size: 64px; } | |
| .spoticon-user-alt-active-48::before { | |
| content: "\f484"; | |
| font-size: 48px; } | |
| .spoticon-user-circle-16::before { | |
| content: "\f118"; | |
| font-size: 16px; } | |
| .spoticon-user-circle-24::before { | |
| content: "\f119"; | |
| font-size: 24px; } | |
| .spoticon-user-circle-32::before { | |
| content: "\f154"; | |
| font-size: 32px; } | |
| .spoticon-user-circle-48::before { | |
| content: "\f155"; | |
| font-size: 48px; } | |
| .spoticon-user-circle-64::before { | |
| content: "\f15a"; | |
| font-size: 64px; } | |
| .spoticon-video-16::before { | |
| content: "\f26B"; | |
| font-size: 16px; } | |
| .spoticon-video-24::before { | |
| content: "\f2A0"; | |
| font-size: 24px; } | |
| .spoticon-video-32::before { | |
| content: "\f26C"; | |
| font-size: 32px; } | |
| .spoticon-video-48::before { | |
| content: "\f489"; | |
| font-size: 48px; } | |
| .spoticon-video-64::before { | |
| content: "\f26D"; | |
| font-size: 64px; } | |
| .spoticon-volume-16::before { | |
| content: "\f15e"; | |
| font-size: 16px; } | |
| .spoticon-volume-24::before { | |
| content: "\f1DB"; | |
| font-size: 24px; } | |
| .spoticon-volume-32::before { | |
| content: "\f15f"; | |
| font-size: 32px; } | |
| .spoticon-volume-48::before { | |
| content: "\f485"; | |
| font-size: 48px; } | |
| .spoticon-volume-64::before { | |
| content: "\f1B0"; | |
| font-size: 64px; } | |
| .spoticon-volume-off-16::before { | |
| content: "\f1EF"; | |
| font-size: 16px; } | |
| .spoticon-volume-off-24::before { | |
| content: "\f3BB"; | |
| font-size: 24px; } | |
| .spoticon-volume-off-32::before { | |
| content: "\f1F0"; | |
| font-size: 32px; } | |
| .spoticon-volume-off-48::before { | |
| content: "\f486"; | |
| font-size: 48px; } | |
| .spoticon-volume-off-64::before { | |
| content: "\f1F1"; | |
| font-size: 64px; } | |
| .spoticon-volume-onewave-16::before { | |
| content: "\f203"; | |
| font-size: 16px; } | |
| .spoticon-volume-onewave-24::before { | |
| content: "\f204"; | |
| font-size: 24px; } | |
| .spoticon-volume-onewave-32::before { | |
| content: "\f205"; | |
| font-size: 32px; } | |
| .spoticon-volume-twowave-16::before { | |
| content: "\f206"; | |
| font-size: 16px; } | |
| .spoticon-volume-twowave-24::before { | |
| content: "\f207"; | |
| font-size: 24px; } | |
| .spoticon-volume-twowave-32::before { | |
| content: "\f208"; | |
| font-size: 32px; } | |
| .spoticon-warning-16::before { | |
| content: "\f1F2"; | |
| font-size: 16px; } | |
| .spoticon-warning-32::before { | |
| content: "\f1F3"; | |
| font-size: 32px; } | |
| .spoticon-warning-64::before { | |
| content: "\f1F4"; | |
| font-size: 64px; } | |
| .spoticon-watch-16::before { | |
| content: "\f359"; | |
| font-size: 16px; } | |
| .spoticon-watch-24::before { | |
| content: "\f35A"; | |
| font-size: 24px; } | |
| .spoticon-watch-32::before { | |
| content: "\f35B"; | |
| font-size: 32px; } | |
| .spoticon-watch-48::before { | |
| content: "\f487"; | |
| font-size: 48px; } | |
| .spoticon-watch-64::before { | |
| content: "\f35C"; | |
| font-size: 64px; } | |
| .spoticon-whatsapp-16::before { | |
| content: "\f210"; | |
| font-size: 16px; } | |
| .spoticon-whatsapp-32::before { | |
| content: "\f211"; | |
| font-size: 32px; } | |
| .spoticon-whatsapp-64::before { | |
| content: "\f212"; | |
| font-size: 64px; } | |
| .spoticon-x-16::before { | |
| content: "\f160"; | |
| font-size: 16px; } | |
| .spoticon-x-24::before { | |
| content: "\f1C5"; | |
| font-size: 24px; } | |
| .spoticon-x-32::before { | |
| content: "\f161"; | |
| font-size: 32px; } | |
| .spoticon-x-48::before { | |
| content: "\f488"; | |
| font-size: 48px; } | |
| .spoticon-x-64::before { | |
| content: "\f1B1"; | |
| font-size: 64px; } | |
| [dir="rtl"] .spoticon-arrow-left-16::before { | |
| content: "\f186"; | |
| font-size: 16px; } | |
| [dir="rtl"] .spoticon-arrow-left-24::before { | |
| content: "\f3AF"; | |
| font-size: 24px; } | |
| [dir="rtl"] .spoticon-arrow-left-32::before { | |
| content: "\f187"; | |
| font-size: 32px; } | |
| [dir="rtl"] .spoticon-arrow-left-48::before { | |
| content: "\f410"; | |
| font-size: 48px; } | |
| [dir="rtl"] .spoticon-arrow-left-64::before { | |
| content: "\f188"; | |
| font-size: 64px; } | |
| [dir="rtl"] .spoticon-arrow-right-16::before { | |
| content: "\f183"; | |
| font-size: 16px; } | |
| [dir="rtl"] .spoticon-arrow-right-24::before { | |
| content: "\f3AE"; | |
| font-size: 24px; } | |
| [dir="rtl"] .spoticon-arrow-right-32::before { | |
| content: "\f184"; | |
| font-size: 32px; } | |
| [dir="rtl"] .spoticon-arrow-right-48::before { | |
| content: "\f40F"; | |
| font-size: 48px; } | |
| [dir="rtl"] .spoticon-arrow-right-64::before { | |
| content: "\f185"; | |
| font-size: 64px; } | |
| [dir="rtl"] .spoticon-chevron-left-16::before { | |
| content: "\f110"; | |
| font-size: 16px; } | |
| [dir="rtl"] .spoticon-chevron-left-24::before { | |
| content: "\f396"; | |
| font-size: 24px; } | |
| [dir="rtl"] .spoticon-chevron-left-32::before { | |
| content: "\f111"; | |
| font-size: 32px; } | |
| [dir="rtl"] .spoticon-chevron-left-48::before { | |
| content: "\f420"; | |
| font-size: 48px; } | |
| [dir="rtl"] .spoticon-chevron-left-64::before { | |
| content: "\f16E"; | |
| font-size: 64px; } | |
| [dir="rtl"] .spoticon-chevron-right-16::before { | |
| content: "\f10e"; | |
| font-size: 16px; } | |
| [dir="rtl"] .spoticon-chevron-right-24::before { | |
| content: "\f395"; | |
| font-size: 24px; } | |
| [dir="rtl"] .spoticon-chevron-right-32::before { | |
| content: "\f10f"; | |
| font-size: 32px; } | |
| [dir="rtl"] .spoticon-chevron-right-48::before { | |
| content: "\f41F"; | |
| font-size: 48px; } | |
| [dir="rtl"] .spoticon-chevron-right-64::before { | |
| content: "\f16D"; | |
| font-size: 64px; } | |
| /** | |
| * Spoticons Mixins | |
| * | |
| * There are two mixins that might be useful when dealing with Spoticons. | |
| * | |
| * ##### `.spoticon-font()` | |
| * Gives you the font, font-family, font-style, etc styles for creating a spoticon. | |
| * | |
| * ##### `.spoticon($icon; $size;)` | |
| * Creates a standard spoticon. Basically creates a `:before` pseudo element, | |
| * gives that element `.spoticon-font()` and sets the the content to the correct | |
| * icon and font-size. | |
| * | |
| * <span class="text-warning">NOTE: If you want the volume icon, pass just `volume` as the name not | |
| * `$spoticon-volume-16`,`$spoticon-volume-32`, or even `"\f15e"`. The mixin | |
| * will choose the correct icon and size for you.</span> | |
| * | |
| * Styleguide 1.2.2 | |
| */ | |
| /** | |
| * Spoticons In Text | |
| * | |
| * Some Spoticons need to be aligned with text. | |
| * | |
| * Markup: <div style="line-height: 50px"> | |
| * <span class="spoticon-thumbs-up-24"></span>Thumbs Up <span class="spoticon-thumbs-down-24"></span>Thumbs Down | |
| * </div> | |
| * <div> | |
| * <span class="spoticon-gears-16"></span> Settings Icon <span class="spoticon-playlist-16"></span> Playlist | |
| * </div> | |
| * | |
| * Styleguide 1.2.4 | |
| */ | |
| .spoticon-settings-16::before { | |
| content: "\f122"; | |
| font-size: 16px; } | |
| .clearfix::after { | |
| content: ""; | |
| display: table; } | |
| [dir] .clearfix::after { | |
| clear: both; } | |
| [dir=ltr] .pull-right { | |
| float: right; } | |
| [dir=rtl] .pull-right { | |
| float: left; } | |
| [dir=ltr] .pull-left { | |
| float: left; } | |
| [dir=rtl] .pull-left { | |
| float: right; } | |
| .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); } | |
| [dir] .glue-hidden-visually { | |
| margin: -1px; | |
| padding: 0; | |
| border: 0; } | |
| .affix { | |
| position: fixed; } | |
| .one-line { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| .border-box { | |
| box-sizing: border-box; } | |
| [dir] .img-circle { | |
| border-radius: 500px; } | |
| .allow-overflow { | |
| overflow: visible !important; } | |
| 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; } | |
| [dir] .scrollbar-style-visible-mac ::-webkit-scrollbar-track, [dir] .scrollbar-style-visible-mac::-webkit-scrollbar-track, [dir] .scrollbar-style-visible-windows ::-webkit-scrollbar-track, [dir] .scrollbar-style-visible-windows::-webkit-scrollbar-track, [dir] .scrollbar-style-visible-linux ::-webkit-scrollbar-track, [dir] .scrollbar-style-visible-linux::-webkit-scrollbar-track { | |
| background-color: #614348; } | |
| .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; } | |
| [dir] .scrollbar-style-visible-mac::-webkit-scrollbar-thumb, [dir] .scrollbar-style-visible-mac ::-webkit-scrollbar-thumb, [dir] .scrollbar-style-visible-windows::-webkit-scrollbar-thumb, [dir] .scrollbar-style-visible-windows ::-webkit-scrollbar-thumb, [dir] .scrollbar-style-visible-linux::-webkit-scrollbar-thumb, [dir] .scrollbar-style-visible-linux ::-webkit-scrollbar-thumb { | |
| background-color: #535353; } | |
| [dir] .scrollbar-style-visible-mac::-webkit-scrollbar-thumb:hover, [dir] .scrollbar-style-visible-mac ::-webkit-scrollbar-thumb:hover, [dir] .scrollbar-style-visible-windows::-webkit-scrollbar-thumb:hover, [dir] .scrollbar-style-visible-windows ::-webkit-scrollbar-thumb:hover, [dir] .scrollbar-style-visible-linux::-webkit-scrollbar-thumb:hover, [dir] .scrollbar-style-visible-linux ::-webkit-scrollbar-thumb:hover { | |
| background-color: #a0a0a0; } | |
| [dir] .scrollbar-style-visible-mac::-webkit-scrollbar-corner, [dir] .scrollbar-style-visible-mac ::-webkit-scrollbar-corner, [dir] .scrollbar-style-visible-windows::-webkit-scrollbar-corner, [dir] .scrollbar-style-visible-windows ::-webkit-scrollbar-corner, [dir] .scrollbar-style-visible-linux::-webkit-scrollbar-corner, [dir] .scrollbar-style-visible-linux ::-webkit-scrollbar-corner { | |
| background-color: #614348; } | |
| [dir] .scrollbar-style-visible-mac::-webkit-scrollbar-thumb, [dir] .scrollbar-style-visible-mac ::-webkit-scrollbar-thumb { | |
| border: 4px solid transparent; | |
| border-radius: 16px; | |
| background-clip: padding-box; } | |
| [dir] .scrollbar-style-visible-windows::-webkit-scrollbar-thumb, [dir] .scrollbar-style-visible-windows ::-webkit-scrollbar-thumb { | |
| border: 1px solid transparent; } | |
| [dir] .scrollbar-style-visible-linux::-webkit-scrollbar-thumb, [dir] .scrollbar-style-visible-linux ::-webkit-scrollbar-thumb { | |
| border: 1px solid transparent; } | |
| [dir] .scrollbar-style-visible-windows::-webkit-scrollbar-button, [dir] .scrollbar-style-visible-windows ::-webkit-scrollbar-button, [dir] .scrollbar-style-visible-linux::-webkit-scrollbar-button, [dir] .scrollbar-style-visible-linux ::-webkit-scrollbar-button { | |
| background-color: #614348; | |
| background-image: url("https://d2j0f09xqmv212.cloudfront.net/images/scrollbar-buttons.png"); | |
| background-size: 16px 64px; } | |
| [dir] .scrollbar-style-visible-windows::-webkit-scrollbar-button:disabled, [dir] .scrollbar-style-visible-windows ::-webkit-scrollbar-button:disabled, [dir] .scrollbar-style-visible-linux::-webkit-scrollbar-button:disabled, [dir] .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; } | |
| [dir=ltr] .scrollbar-style-visible-windows::-webkit-scrollbar-button:vertical:start:decrement, [dir=ltr] .scrollbar-style-visible-windows ::-webkit-scrollbar-button:vertical:start:decrement, [dir=ltr] .scrollbar-style-visible-linux::-webkit-scrollbar-button:vertical:start:decrement, [dir=ltr] .scrollbar-style-visible-linux ::-webkit-scrollbar-button:vertical:start:decrement { | |
| background-position: 0 0; } | |
| [dir=rtl] .scrollbar-style-visible-windows::-webkit-scrollbar-button:vertical:start:decrement, [dir=rtl] .scrollbar-style-visible-windows ::-webkit-scrollbar-button:vertical:start:decrement, [dir=rtl] .scrollbar-style-visible-linux::-webkit-scrollbar-button:vertical:start:decrement, [dir=rtl] .scrollbar-style-visible-linux ::-webkit-scrollbar-button:vertical:start:decrement { | |
| background-position: 100% 0; } | |
| [dir=ltr] .scrollbar-style-visible-windows::-webkit-scrollbar-button:vertical:end:increment, [dir=ltr] .scrollbar-style-visible-windows ::-webkit-scrollbar-button:vertical:end:increment, [dir=ltr] .scrollbar-style-visible-linux::-webkit-scrollbar-button:vertical:end:increment, [dir=ltr] .scrollbar-style-visible-linux ::-webkit-scrollbar-button:vertical:end:increment { | |
| background-position: 0 -16px; } | |
| [dir=rtl] .scrollbar-style-visible-windows::-webkit-scrollbar-button:vertical:end:increment, [dir=rtl] .scrollbar-style-visible-windows ::-webkit-scrollbar-button:vertical:end:increment, [dir=rtl] .scrollbar-style-visible-linux::-webkit-scrollbar-button:vertical:end:increment, [dir=rtl] .scrollbar-style-visible-linux ::-webkit-scrollbar-button:vertical:end:increment { | |
| background-position: 100% -16px; } | |
| [dir=ltr] .scrollbar-style-visible-windows::-webkit-scrollbar-button:horizontal:start:decrement, [dir=ltr] .scrollbar-style-visible-windows ::-webkit-scrollbar-button:horizontal:start:decrement, [dir=ltr] .scrollbar-style-visible-linux::-webkit-scrollbar-button:horizontal:start:decrement, [dir=ltr] .scrollbar-style-visible-linux ::-webkit-scrollbar-button:horizontal:start:decrement { | |
| background-position: 0 -32px; } | |
| [dir=rtl] .scrollbar-style-visible-windows::-webkit-scrollbar-button:horizontal:start:decrement, [dir=rtl] .scrollbar-style-visible-windows ::-webkit-scrollbar-button:horizontal:start:decrement, [dir=rtl] .scrollbar-style-visible-linux::-webkit-scrollbar-button:horizontal:start:decrement, [dir=rtl] .scrollbar-style-visible-linux ::-webkit-scrollbar-button:horizontal:start:decrement { | |
| background-position: 100% -32px; } | |
| [dir=ltr] .scrollbar-style-visible-windows::-webkit-scrollbar-button:horizontal:end:increment, [dir=ltr] .scrollbar-style-visible-windows ::-webkit-scrollbar-button:horizontal:end:increment, [dir=ltr] .scrollbar-style-visible-linux::-webkit-scrollbar-button:horizontal:end:increment, [dir=ltr] .scrollbar-style-visible-linux ::-webkit-scrollbar-button:horizontal:end:increment { | |
| background-position: 0 -48px; } | |
| [dir=rtl] .scrollbar-style-visible-windows::-webkit-scrollbar-button:horizontal:end:increment, [dir=rtl] .scrollbar-style-visible-windows ::-webkit-scrollbar-button:horizontal:end:increment, [dir=rtl] .scrollbar-style-visible-linux::-webkit-scrollbar-button:horizontal:end:increment, [dir=rtl] .scrollbar-style-visible-linux ::-webkit-scrollbar-button:horizontal:end:increment { | |
| background-position: 100% -48px; } | |
| .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-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; } | |
| [dir] .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, [dir] .scrollbar-style-visible-windows.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start, [dir] .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, [dir] .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://d2j0f09xqmv212.cloudfront.net/images/scrollbar-buttons.png"), linear-gradient(to bottom, #614348, #614348 16px); | |
| background-repeat: no-repeat; } | |
| [dir=ltr] .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, [dir=ltr] .scrollbar-style-visible-windows.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start, [dir=ltr] .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, [dir=ltr] .scrollbar-style-visible-linux.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start { | |
| background-position: 0 48px; } | |
| [dir=rtl] .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, [dir=rtl] .scrollbar-style-visible-windows.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start, [dir=rtl] .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start, [dir=rtl] .scrollbar-style-visible-linux.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start { | |
| background-position: 100% 48px; } | |
| [dir] .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start:disabled, [dir] .scrollbar-style-visible-windows.body-container--windows .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start:disabled, [dir] .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows::-webkit-scrollbar-button:vertical:decrement:start:disabled, [dir] .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; } | |
| [dir=ltr] .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows.messagebar::-webkit-scrollbar-button:vertical:decrement:start, [dir=ltr] .scrollbar-style-visible-windows.body-container--windows.messagebar .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start, [dir=ltr] .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows.messagebar::-webkit-scrollbar-button:vertical:decrement:start, [dir=ltr] .scrollbar-style-visible-linux.body-container--windows.messagebar .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start { | |
| background-position: 0 17px; } | |
| [dir=rtl] .scrollbar-style-visible-windows.is-main-content-page-iframe.body-container--windows.messagebar::-webkit-scrollbar-button:vertical:decrement:start, [dir=rtl] .scrollbar-style-visible-windows.body-container--windows.messagebar .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start, [dir=rtl] .scrollbar-style-visible-linux.is-main-content-page-iframe.body-container--windows.messagebar::-webkit-scrollbar-button:vertical:decrement:start, [dir=rtl] .scrollbar-style-visible-linux.body-container--windows.messagebar .is-main-content-page-embedded::-webkit-scrollbar-button:vertical:decrement:start { | |
| background-position: 100% 17px; } | |
| /** | |
| * Drag & Drop | |
| * | |
| * Not much use for anyone except spotify-events. | |
| * | |
| * Markup: | |
| * <div class="dnd-image" draggable>Text | |
| * </div> | |
| * | |
| * Styleguide 60.7 | |
| */ | |
| [draggable] { | |
| user-select: none; } | |
| .dnd-image-shelter { | |
| position: fixed; | |
| top: 0; | |
| width: 300px; | |
| height: 300px; | |
| z-index: -1; } | |
| [dir] .dnd-image-shelter { | |
| background-color: #614348; } | |
| [dir=ltr] .dnd-image-shelter { | |
| left: 0; } | |
| [dir=rtl] .dnd-image-shelter { | |
| right: 0; } | |
| .dnd-image { | |
| position: fixed; | |
| top: 0; | |
| color: #614348; | |
| display: inline-block; | |
| font-size: 13px; | |
| max-width: 300px; | |
| max-height: 300px; | |
| z-index: -2; } | |
| [dir] .dnd-image { | |
| background: #ffffff; | |
| border: 1px solid #4c3337; | |
| padding: 3px 6px 1px; } | |
| [dir=ltr] .dnd-image { | |
| left: 0; } | |
| [dir=rtl] .dnd-image { | |
| right: 0; } | |
| .tr-drag-indicator { | |
| position: absolute; | |
| pointer-events: none; } | |
| [dir] .tr-drag-indicator { | |
| border-top: 1px solid #1db954; } | |
| /** | |
| * Code | |
| * | |
| * Styleguide 20.7 | |
| */ | |
| /** | |
| * Inline | |
| * | |
| * Wrap inline snippets of code | |
| * | |
| * Markup: | |
| * For example, <code><section></code> should be wrapped as inline. | |
| * | |
| * Styleguide 20.7.1 | |
| */ | |
| /** | |
| * Block | |
| * | |
| * Markup: | |
| * <pre><p>Sample text here...</p></pre> | |
| * | |
| * Styleguide 20.7.2 | |
| */ | |
| code, | |
| pre { | |
| font-size: 14px; | |
| line-height: 20px; | |
| letter-spacing: 0.015em; | |
| font-family: Monaco, Menlo, Consolas, "Courier New", monospace; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: none; | |
| font-size: 12px; } | |
| code { | |
| white-space: nowrap; } | |
| [dir] code { | |
| padding: 2px 4px; | |
| background-color: #614348; | |
| border-radius: 4px; } | |
| pre { | |
| color: #b3b3b3; | |
| display: block; | |
| font-size: 13px; | |
| line-height: 20px; | |
| word-break: break-all; | |
| word-wrap: break-word; | |
| white-space: pre; | |
| white-space: pre-wrap; } | |
| [dir] pre { | |
| padding: 10px; | |
| background-color: #614348; } | |
| [dir] pre.prettyprint { | |
| margin-bottom: 20px; } | |
| pre code { | |
| color: inherit; | |
| white-space: pre; | |
| white-space: pre-wrap; } | |
| [dir] 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 { | |
| display: inline-block; | |
| position: relative; | |
| vertical-align: middle; | |
| z-index: 0; | |
| font-size: 11px; | |
| font-weight: 400; | |
| letter-spacing: 0.16em; | |
| text-transform: uppercase; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| [dir] .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; } | |
| [dir] .button:disabled:not(.current) { | |
| cursor: default; } | |
| @media screen and (-webkit-min-device-pixel-ratio: 2) { | |
| .button { | |
| backface-visibility: hidden; } } | |
| .button.button-green { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-green { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: #1db954; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-green { | |
| padding-left: 32px; | |
| padding-right: 32px; } | |
| [dir=rtl] .button.button-green { | |
| padding-right: 32px; | |
| padding-left: 32px; } | |
| [dir] .button.button-green .b-alt-text { | |
| margin-top: -30px; } | |
| .button.button-green.contextmenu-active, .button.button-green:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-green.contextmenu-active, [dir] .button.button-green:not(:disabled):hover { | |
| background-color: #1ed760; } | |
| .button.button-green:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-green:not(:disabled):hover:active { | |
| background: #14833b; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-green:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-green { | |
| transition-duration: 50ms; } } | |
| .button.button-green::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-green::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-green.contextmenu-active, [dir] .button.button-green:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-green.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-green.contextmenu-active::after, [dir] .button.button-green:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-green.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-green:not(:disabled):hover { | |
| transform: scale(1.0625); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-green:not(:disabled):hover { | |
| transform: scale(1.0625); } } | |
| .button.button-white { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #4c3337; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-white { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: #ffffff; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-white { | |
| padding-left: 32px; | |
| padding-right: 32px; } | |
| [dir=rtl] .button.button-white { | |
| padding-right: 32px; | |
| padding-left: 32px; } | |
| [dir] .button.button-white .b-alt-text { | |
| margin-top: -30px; } | |
| .button.button-white.contextmenu-active, .button.button-white:not(:disabled):hover { | |
| color: #4c3337; } | |
| [dir] .button.button-white.contextmenu-active, [dir] .button.button-white:not(:disabled):hover { | |
| background-color: #ffffff; } | |
| .button.button-white:not(:disabled):hover:active { | |
| color: #4c3337; } | |
| [dir] .button.button-white:not(:disabled):hover:active { | |
| background: #b3b3b3; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-white:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-white { | |
| transition-duration: 50ms; } } | |
| .button.button-white::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-white::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-white.contextmenu-active, [dir] .button.button-white:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-white.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-white.contextmenu-active::after, [dir] .button.button-white:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-white.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-white:not(:disabled):hover { | |
| transform: scale(1.0625); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-white:not(:disabled):hover { | |
| transform: scale(1.0625); } } | |
| .button.button-blue { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-blue { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: #4687d6; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-blue { | |
| padding-left: 32px; | |
| padding-right: 32px; } | |
| [dir=rtl] .button.button-blue { | |
| padding-right: 32px; | |
| padding-left: 32px; } | |
| [dir] .button.button-blue .b-alt-text { | |
| margin-top: -30px; } | |
| .button.button-blue.contextmenu-active, .button.button-blue:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-blue.contextmenu-active, [dir] .button.button-blue:not(:disabled):hover { | |
| background-color: #2e77d0; } | |
| .button.button-blue:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-blue:not(:disabled):hover:active { | |
| background: #1d4c85; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-blue:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-blue { | |
| transition-duration: 50ms; } } | |
| .button.button-blue::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-blue::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-blue.contextmenu-active, [dir] .button.button-blue:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-blue.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-blue.contextmenu-active::after, [dir] .button.button-blue:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-blue.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-blue:not(:disabled):hover { | |
| transform: scale(1.0625); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-blue:not(:disabled):hover { | |
| transform: scale(1.0625); } } | |
| .button.button-red { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-red { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: #cd1a2b; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-red { | |
| padding-left: 32px; | |
| padding-right: 32px; } | |
| [dir=rtl] .button.button-red { | |
| padding-right: 32px; | |
| padding-left: 32px; } | |
| [dir] .button.button-red .b-alt-text { | |
| margin-top: -30px; } | |
| .button.button-red.contextmenu-active, .button.button-red:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-red.contextmenu-active, [dir] .button.button-red:not(:disabled):hover { | |
| background-color: #e22134; } | |
| .button.button-red:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-red:not(:disabled):hover:active { | |
| background: #941320; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-red:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-red { | |
| transition-duration: 50ms; } } | |
| .button.button-red::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-red::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-red.contextmenu-active, [dir] .button.button-red:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-red.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-red.contextmenu-active::after, [dir] .button.button-red:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-red.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-red:not(:disabled):hover { | |
| transform: scale(1.0625); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-red:not(:disabled):hover { | |
| transform: scale(1.0625); } } | |
| .button.button-gray { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-gray { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: #614348; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-gray { | |
| padding-left: 32px; | |
| padding-right: 32px; } | |
| [dir=rtl] .button.button-gray { | |
| padding-right: 32px; | |
| padding-left: 32px; } | |
| [dir] .button.button-gray .b-alt-text { | |
| margin-top: -30px; } | |
| .button.button-gray.contextmenu-active, .button.button-gray:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-gray.contextmenu-active, [dir] .button.button-gray:not(:disabled):hover { | |
| background-color: #535353; } | |
| .button.button-gray:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-gray:not(:disabled):hover:active { | |
| background: #614348; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-gray:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-gray { | |
| transition-duration: 50ms; } } | |
| .button.button-gray::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-gray::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-gray.contextmenu-active, [dir] .button.button-gray:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-gray.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-gray.contextmenu-active::after, [dir] .button.button-gray:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-gray.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-gray:not(:disabled):hover { | |
| transform: scale(1.0625); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-gray:not(:disabled):hover { | |
| transform: scale(1.0625); } } | |
| .button.button-with-stroke { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-with-stroke { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: rgba(24, 24, 24, 0.7); | |
| transition-property: transform, box-shadow, color, background-color; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-with-stroke { | |
| padding-left: 32px; | |
| padding-right: 32px; } | |
| [dir=rtl] .button.button-with-stroke { | |
| padding-right: 32px; | |
| padding-left: 32px; } | |
| [dir] .button.button-with-stroke .b-alt-text { | |
| margin-top: -30px; } | |
| [dir] .button.button-with-stroke.contextmenu-active, [dir] .button.button-with-stroke:not(:disabled):hover { | |
| background-color: rgba(24, 24, 24, 0.7); } | |
| .button.button-with-stroke:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-with-stroke:not(:disabled):hover:active { | |
| background: rgba(24, 24, 24, 0.7); | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-with-stroke:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-with-stroke { | |
| transition-duration: 50ms; } } | |
| .button.button-with-stroke::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-with-stroke::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-with-stroke.contextmenu-active, [dir] .button.button-with-stroke:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-with-stroke.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-with-stroke.contextmenu-active::after, [dir] .button.button-with-stroke:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-with-stroke.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-with-stroke::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-with-stroke::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-with-stroke::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-with-stroke.contextmenu-active, [dir] .button.button-with-stroke:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent; } | |
| [dir] .button.button-with-stroke.contextmenu-active::after, [dir] .button.button-with-stroke:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-with-stroke.contextmenu-active, [dir] .button.button-with-stroke:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| [dir] .button.button-with-stroke.contextmenu-active::after, [dir] .button.button-with-stroke:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } } | |
| [dir] .button.button-with-stroke:not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-with-stroke:not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-with-stroke.contextmenu-active, [dir] .button.button-with-stroke:not(:disabled):hover { | |
| transform: scale(1.0625); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-with-stroke.contextmenu-active, [dir] .button.button-with-stroke:not(:disabled):hover { | |
| transform: scale(1.0625); } } | |
| .button.button-with-stroke.added, .button.button-with-stroke.active { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-with-stroke.added, [dir] .button.button-with-stroke.active { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: rgba(24, 24, 24, 0.7); | |
| transition-property: transform, box-shadow, color, background-color; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-with-stroke.added, [dir=ltr] .button.button-with-stroke.active { | |
| padding-left: 32px; | |
| padding-right: 32px; } | |
| [dir=rtl] .button.button-with-stroke.added, [dir=rtl] .button.button-with-stroke.active { | |
| padding-right: 32px; | |
| padding-left: 32px; } | |
| [dir] .button.button-with-stroke.added .b-alt-text, [dir] .button.button-with-stroke.active .b-alt-text { | |
| margin-top: -30px; } | |
| [dir] .button.button-with-stroke.added.contextmenu-active, [dir] .button.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-with-stroke.active.contextmenu-active, [dir] .button.button-with-stroke.active:not(:disabled):hover { | |
| background-color: rgba(24, 24, 24, 0.7); } | |
| .button.button-with-stroke.added:not(:disabled):hover:active, .button.button-with-stroke.active:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-with-stroke.added:not(:disabled):hover:active, [dir] .button.button-with-stroke.active:not(:disabled):hover:active { | |
| background: rgba(24, 24, 24, 0.7); | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-with-stroke.added:not(:disabled):hover:active, [dir] .button.button-with-stroke.active:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-with-stroke.added, [dir] .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); } | |
| [dir] .button.button-with-stroke.added::after, [dir] .button.button-with-stroke.active::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-with-stroke.added::after, [dir] .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); } | |
| [dir] .button.button-with-stroke.added.contextmenu-active, [dir] .button.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-with-stroke.active.contextmenu-active, [dir] .button.button-with-stroke.active:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-with-stroke.added.contextmenu-active, [dir] .button.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-with-stroke.active.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-with-stroke.added.contextmenu-active::after, [dir] .button.button-with-stroke.added:not(:disabled):hover::after, [dir] .button.button-with-stroke.active.contextmenu-active::after, [dir] .button.button-with-stroke.active:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-with-stroke.added.contextmenu-active::after, [dir] .button.button-with-stroke.added:not(:disabled):hover::after, [dir] .button.button-with-stroke.active.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-with-stroke.added::after, [dir] .button.button-with-stroke.active::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-with-stroke.added::after, [dir=ltr] .button.button-with-stroke.active::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-with-stroke.added::after, [dir=rtl] .button.button-with-stroke.active::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-with-stroke.added.contextmenu-active, [dir] .button.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-with-stroke.active.contextmenu-active, [dir] .button.button-with-stroke.active:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent; } | |
| [dir] .button.button-with-stroke.added.contextmenu-active::after, [dir] .button.button-with-stroke.added:not(:disabled):hover::after, [dir] .button.button-with-stroke.active.contextmenu-active::after, [dir] .button.button-with-stroke.active:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-with-stroke.added.contextmenu-active, [dir] .button.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-with-stroke.active.contextmenu-active, [dir] .button.button-with-stroke.active:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| [dir] .button.button-with-stroke.added.contextmenu-active::after, [dir] .button.button-with-stroke.added:not(:disabled):hover::after, [dir] .button.button-with-stroke.active.contextmenu-active::after, [dir] .button.button-with-stroke.active:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } } | |
| [dir] .button.button-with-stroke.added:not(:disabled):hover:active, [dir] .button.button-with-stroke.active:not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-with-stroke.added:not(:disabled):hover:active::after, [dir] .button.button-with-stroke.active:not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-with-stroke.added.contextmenu-active, [dir] .button.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-with-stroke.active.contextmenu-active, [dir] .button.button-with-stroke.active:not(:disabled):hover { | |
| transform: scale(1.0625); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-with-stroke.added.contextmenu-active, [dir] .button.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-with-stroke.active.contextmenu-active, [dir] .button.button-with-stroke.active:not(:disabled):hover { | |
| transform: scale(1.0625); } } | |
| .button.button-facebook { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-facebook { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: #3b5998; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-facebook { | |
| padding-left: 32px; | |
| padding-right: 32px; } | |
| [dir=rtl] .button.button-facebook { | |
| padding-right: 32px; | |
| padding-left: 32px; } | |
| [dir] .button.button-facebook .b-alt-text { | |
| margin-top: -30px; } | |
| .button.button-facebook.contextmenu-active, .button.button-facebook:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-facebook.contextmenu-active, [dir] .button.button-facebook:not(:disabled):hover { | |
| background-color: #3762ba; } | |
| .button.button-facebook:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-facebook:not(:disabled):hover:active { | |
| background: #365284; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-facebook:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-facebook { | |
| transition-duration: 50ms; } } | |
| .button.button-facebook::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-facebook::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-facebook.contextmenu-active, [dir] .button.button-facebook:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-facebook.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-facebook.contextmenu-active::after, [dir] .button.button-facebook:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-facebook.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-facebook:not(:disabled):hover { | |
| transform: scale(1.0625); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-facebook:not(:disabled):hover { | |
| transform: scale(1.0625); } } | |
| .button.button-icon-only { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #b3b3b3; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| width: 32px; } | |
| [dir] .button.button-icon-only { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: transparent; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-icon-only { | |
| padding-left: 32px; | |
| padding-right: 32px; | |
| padding-left: 0; | |
| padding-right: 0; } | |
| [dir=rtl] .button.button-icon-only { | |
| padding-right: 32px; | |
| padding-left: 32px; | |
| padding-right: 0; | |
| padding-left: 0; } | |
| [dir] .button.button-icon-only .b-alt-text { | |
| margin-top: -30px; } | |
| .button.button-icon-only.contextmenu-active, .button.button-icon-only:not(:disabled):hover { | |
| color: #ffffff; } | |
| [dir] .button.button-icon-only.contextmenu-active, [dir] .button.button-icon-only:not(:disabled):hover { | |
| background-color: transparent; } | |
| .button.button-icon-only:not(:disabled):hover:active { | |
| color: #a0a0a0; } | |
| [dir] .button.button-icon-only:not(:disabled):hover:active { | |
| background: transparent; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-icon-only:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-icon-only { | |
| transition-duration: 50ms; } } | |
| .button.button-icon-only::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-icon-only::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-icon-only.contextmenu-active, [dir] .button.button-icon-only:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-icon-only.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-icon-only.contextmenu-active::after, [dir] .button.button-icon-only:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-icon-only.contextmenu-active::after, [dir] .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; | |
| line-height: 32px; | |
| font-size: 16px; | |
| width: calc(100% - 8px); } | |
| [dir] .button.button-icon-only::before { | |
| border-radius: 500px; } | |
| [dir=ltr] .button.button-icon-only::before { | |
| left: 0; | |
| right: 0; | |
| text-align: left; | |
| padding-left: 8px; } | |
| [dir=rtl] .button.button-icon-only::before { | |
| right: 0; | |
| left: 0; | |
| text-align: right; | |
| padding-right: 8px; } | |
| .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; } | |
| [dir] .button.button-icon-only.button-play.playing:not(:hover), [dir] .tl-row.playing .button.button-icon-only.button-play:not(:hover), [dir] .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; } | |
| [dir] .button.button-icon-only.button-play.playing:not(:hover)::after, [dir] .tl-row.playing .button.button-icon-only.button-play:not(:hover)::after, [dir] .card.playing .button.button-icon-only.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .button.button-icon-only.button-play.playing:not(:hover)::after, [dir=ltr] .tl-row.playing .button.button-icon-only.button-play:not(:hover)::after, [dir=ltr] .card.playing .button.button-icon-only.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-icon-only.button-play.playing:not(:hover)::after, [dir=rtl] .tl-row.playing .button.button-icon-only.button-play:not(:hover)::after, [dir=rtl] .card.playing .button.button-icon-only.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-icon-only.button-play.playing:not(:hover).contextmenu-active, [dir] .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .button.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, [dir] .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .button.button-icon-only.button-play.playing:not(:hover).contextmenu-active, [dir] .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .button.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, [dir] .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .button.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active, [dir] .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .button.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active::after, [dir] .tl-row.playing .button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-icon-only.button-play:not(:hover), [dir] .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; } | |
| [dir] .tl-row.playing.button.button-icon-only.button-play:not(:hover)::after, [dir] .card.playing.button.button-icon-only.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .tl-row.playing.button.button-icon-only.button-play:not(:hover)::after, [dir=ltr] .card.playing.button.button-icon-only.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row.playing.button.button-icon-only.button-play:not(:hover)::after, [dir=rtl] .card.playing.button.button-icon-only.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .tl-row.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.button.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .card.playing.button.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| .tl-row.playing.button.button-icon-only.button-play:not(:hover)::before, | |
| .card.playing.button.button-icon-only.button-play:not(:hover)::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f15e"; | |
| font-size: 16px; | |
| line-height: 32px; } | |
| .tl-row.playing.button.button-icon-only.button-play:hover::before, | |
| .card.playing.button.button-icon-only.button-play:hover::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f130"; | |
| font-size: 16px; | |
| line-height: 32px; } | |
| .button.button-icon-only.active { | |
| color: #1ed760; } | |
| .button.button-icon-only.active.contextmenu-active, .button.button-icon-only.active:not(:disabled):hover { | |
| color: #1df369; } | |
| .button.button-icon-only.active:not(:disabled):hover:active { | |
| color: #18ac4d; } | |
| .button.button-icon-only.drop-target-active { | |
| color: #4c3337; } | |
| [dir] .button.button-icon-only.drop-target-active { | |
| background-color: #ffffff; } | |
| .button.button-icon-only.drop-target-active.contextmenu-active, .button.button-icon-only.drop-target-active:not(:disabled):hover { | |
| color: #4c3337; } | |
| .button.button-icon-only.drop-target-active:not(:disabled):hover:active { | |
| color: black; } | |
| [dir] .button.button-icon-only.drop-target-active.contextmenu-active, [dir] .button.button-icon-only.drop-target-active:not(:disabled):hover { | |
| background-color: #ffffff; } | |
| .button.button-icon-with-stroke { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| width: 32px; } | |
| [dir] .button.button-icon-with-stroke { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: rgba(24, 24, 24, 0.7); | |
| transition-property: transform, box-shadow, color, background-color; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-icon-with-stroke { | |
| padding-left: 32px; | |
| padding-right: 32px; | |
| padding-left: 0; | |
| padding-right: 0; } | |
| [dir=rtl] .button.button-icon-with-stroke { | |
| padding-right: 32px; | |
| padding-left: 32px; | |
| padding-right: 0; | |
| padding-left: 0; } | |
| [dir] .button.button-icon-with-stroke .b-alt-text { | |
| margin-top: -30px; } | |
| [dir] .button.button-icon-with-stroke.contextmenu-active, [dir] .button.button-icon-with-stroke:not(:disabled):hover { | |
| background-color: rgba(24, 24, 24, 0.7); } | |
| .button.button-icon-with-stroke:not(:disabled):hover:active { | |
| color: #a0a0a0; } | |
| [dir] .button.button-icon-with-stroke:not(:disabled):hover:active { | |
| background: rgba(24, 24, 24, 0.7); | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-icon-with-stroke:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-icon-with-stroke::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-icon-with-stroke.contextmenu-active, [dir] .button.button-icon-with-stroke:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-icon-with-stroke.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-icon-with-stroke.contextmenu-active::after, [dir] .button.button-icon-with-stroke:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-icon-with-stroke.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-icon-with-stroke::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-icon-with-stroke::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-icon-with-stroke::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-icon-with-stroke.contextmenu-active, [dir] .button.button-icon-with-stroke:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent; } | |
| [dir] .button.button-icon-with-stroke.contextmenu-active::after, [dir] .button.button-icon-with-stroke:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-icon-with-stroke.contextmenu-active, [dir] .button.button-icon-with-stroke:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| [dir] .button.button-icon-with-stroke.contextmenu-active::after, [dir] .button.button-icon-with-stroke:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } } | |
| [dir] .button.button-icon-with-stroke:not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-icon-with-stroke:not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-icon-with-stroke.contextmenu-active, [dir] .button.button-icon-with-stroke:not(:disabled):hover { | |
| transform: scale(1.0625); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-icon-with-stroke.contextmenu-active, [dir] .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; | |
| line-height: 32px; | |
| font-size: 16px; | |
| width: calc(100% - 8px); } | |
| [dir] .button.button-icon-with-stroke::before { | |
| border-radius: 500px; } | |
| [dir=ltr] .button.button-icon-with-stroke::before { | |
| left: 0; | |
| right: 0; | |
| text-align: left; | |
| padding-left: 8px; } | |
| [dir=rtl] .button.button-icon-with-stroke::before { | |
| right: 0; | |
| left: 0; | |
| text-align: right; | |
| padding-right: 8px; } | |
| .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; } | |
| [dir] .button.button-icon-with-stroke.button-play.playing:not(:hover), [dir] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover), [dir] .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; } | |
| [dir] .button.button-icon-with-stroke.button-play.playing:not(:hover)::after, [dir] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover)::after, [dir] .card.playing .button.button-icon-with-stroke.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .button.button-icon-with-stroke.button-play.playing:not(:hover)::after, [dir=ltr] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover)::after, [dir=ltr] .card.playing .button.button-icon-with-stroke.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-icon-with-stroke.button-play.playing:not(:hover)::after, [dir=rtl] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover)::after, [dir=rtl] .card.playing .button.button-icon-with-stroke.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, [dir] .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .button.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, [dir] .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .button.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, [dir] .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .button.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, [dir] .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active, [dir] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .button.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active::after, [dir] .tl-row.playing .button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover), [dir] .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; } | |
| [dir] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover)::after, [dir] .card.playing.button.button-icon-with-stroke.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover)::after, [dir=ltr] .card.playing.button.button-icon-with-stroke.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover)::after, [dir=rtl] .card.playing.button.button-icon-with-stroke.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.button.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .card.playing.button.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| .tl-row.playing.button.button-icon-with-stroke.button-play:not(:hover)::before, | |
| .card.playing.button.button-icon-with-stroke.button-play:not(:hover)::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f15e"; | |
| font-size: 16px; | |
| line-height: 32px; } | |
| .tl-row.playing.button.button-icon-with-stroke.button-play:hover::before, | |
| .card.playing.button.button-icon-with-stroke.button-play:hover::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f130"; | |
| font-size: 16px; | |
| line-height: 32px; } | |
| .button.button-large.button-green { | |
| height: 48px; | |
| line-height: 46px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| font-size: 14px; } | |
| [dir] .button.button-large.button-green { | |
| padding-top: 1px; | |
| border-radius: 24px; | |
| background: #1db954; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-large.button-green { | |
| padding-left: 48px; | |
| padding-right: 48px; } | |
| [dir=rtl] .button.button-large.button-green { | |
| padding-right: 48px; | |
| padding-left: 48px; } | |
| [dir] .button.button-large.button-green .b-alt-text { | |
| margin-top: -46px; } | |
| .button.button-large.button-green.contextmenu-active, .button.button-large.button-green:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-large.button-green.contextmenu-active, [dir] .button.button-large.button-green:not(:disabled):hover { | |
| background-color: #1ed760; } | |
| .button.button-large.button-green:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-large.button-green:not(:disabled):hover:active { | |
| background: #14833b; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-green:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-green::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-green.contextmenu-active, [dir] .button.button-large.button-green:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-green.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-large.button-green.contextmenu-active::after, [dir] .button.button-large.button-green:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-green.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-large.button-green:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-green:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-large.button-white { | |
| height: 48px; | |
| line-height: 46px; | |
| color: #4c3337; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| font-size: 14px; } | |
| [dir] .button.button-large.button-white { | |
| padding-top: 1px; | |
| border-radius: 24px; | |
| background: #ffffff; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-large.button-white { | |
| padding-left: 48px; | |
| padding-right: 48px; } | |
| [dir=rtl] .button.button-large.button-white { | |
| padding-right: 48px; | |
| padding-left: 48px; } | |
| [dir] .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: #4c3337; } | |
| [dir] .button.button-large.button-white.contextmenu-active, [dir] .button.button-large.button-white:not(:disabled):hover { | |
| background-color: #ffffff; } | |
| .button.button-large.button-white:not(:disabled):hover:active { | |
| color: #4c3337; } | |
| [dir] .button.button-large.button-white:not(:disabled):hover:active { | |
| background: #b3b3b3; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-white:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-white::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-white.contextmenu-active, [dir] .button.button-large.button-white:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-white.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-large.button-white.contextmenu-active::after, [dir] .button.button-large.button-white:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-white.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-large.button-white:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-white:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-large.button-blue { | |
| height: 48px; | |
| line-height: 46px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| font-size: 14px; } | |
| [dir] .button.button-large.button-blue { | |
| padding-top: 1px; | |
| border-radius: 24px; | |
| background: #4687d6; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-large.button-blue { | |
| padding-left: 48px; | |
| padding-right: 48px; } | |
| [dir=rtl] .button.button-large.button-blue { | |
| padding-right: 48px; | |
| padding-left: 48px; } | |
| [dir] .button.button-large.button-blue .b-alt-text { | |
| margin-top: -46px; } | |
| .button.button-large.button-blue.contextmenu-active, .button.button-large.button-blue:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-large.button-blue.contextmenu-active, [dir] .button.button-large.button-blue:not(:disabled):hover { | |
| background-color: #2e77d0; } | |
| .button.button-large.button-blue:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-large.button-blue:not(:disabled):hover:active { | |
| background: #1d4c85; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-blue:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-blue::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-blue.contextmenu-active, [dir] .button.button-large.button-blue:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-blue.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-large.button-blue.contextmenu-active::after, [dir] .button.button-large.button-blue:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-blue.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-large.button-blue:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-blue:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-large.button-red { | |
| height: 48px; | |
| line-height: 46px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| font-size: 14px; } | |
| [dir] .button.button-large.button-red { | |
| padding-top: 1px; | |
| border-radius: 24px; | |
| background: #cd1a2b; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-large.button-red { | |
| padding-left: 48px; | |
| padding-right: 48px; } | |
| [dir=rtl] .button.button-large.button-red { | |
| padding-right: 48px; | |
| padding-left: 48px; } | |
| [dir] .button.button-large.button-red .b-alt-text { | |
| margin-top: -46px; } | |
| .button.button-large.button-red.contextmenu-active, .button.button-large.button-red:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-large.button-red.contextmenu-active, [dir] .button.button-large.button-red:not(:disabled):hover { | |
| background-color: #e22134; } | |
| .button.button-large.button-red:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-large.button-red:not(:disabled):hover:active { | |
| background: #941320; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-red:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-red::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-red.contextmenu-active, [dir] .button.button-large.button-red:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-red.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-large.button-red.contextmenu-active::after, [dir] .button.button-large.button-red:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-red.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-large.button-red:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-red:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-large.button-gray { | |
| height: 48px; | |
| line-height: 46px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| font-size: 14px; } | |
| [dir] .button.button-large.button-gray { | |
| padding-top: 1px; | |
| border-radius: 24px; | |
| background: #614348; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-large.button-gray { | |
| padding-left: 48px; | |
| padding-right: 48px; } | |
| [dir=rtl] .button.button-large.button-gray { | |
| padding-right: 48px; | |
| padding-left: 48px; } | |
| [dir] .button.button-large.button-gray .b-alt-text { | |
| margin-top: -46px; } | |
| .button.button-large.button-gray.contextmenu-active, .button.button-large.button-gray:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-large.button-gray.contextmenu-active, [dir] .button.button-large.button-gray:not(:disabled):hover { | |
| background-color: #535353; } | |
| .button.button-large.button-gray:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-large.button-gray:not(:disabled):hover:active { | |
| background: #614348; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-gray:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-gray::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-gray.contextmenu-active, [dir] .button.button-large.button-gray:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-gray.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-large.button-gray.contextmenu-active::after, [dir] .button.button-large.button-gray:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-gray.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-large.button-gray:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-gray:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-large.button-with-stroke { | |
| height: 48px; | |
| line-height: 46px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| font-size: 14px; } | |
| [dir] .button.button-large.button-with-stroke { | |
| padding-top: 1px; | |
| border-radius: 24px; | |
| background: rgba(24, 24, 24, 0.7); | |
| transition-property: transform, box-shadow, color, background-color; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-large.button-with-stroke { | |
| padding-left: 48px; | |
| padding-right: 48px; } | |
| [dir=rtl] .button.button-large.button-with-stroke { | |
| padding-right: 48px; | |
| padding-left: 48px; } | |
| [dir] .button.button-large.button-with-stroke .b-alt-text { | |
| margin-top: -46px; } | |
| [dir] .button.button-large.button-with-stroke.contextmenu-active, [dir] .button.button-large.button-with-stroke:not(:disabled):hover { | |
| background-color: rgba(24, 24, 24, 0.7); } | |
| .button.button-large.button-with-stroke:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-large.button-with-stroke:not(:disabled):hover:active { | |
| background: rgba(24, 24, 24, 0.7); | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-with-stroke:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-with-stroke::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-with-stroke.contextmenu-active, [dir] .button.button-large.button-with-stroke:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-with-stroke.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-large.button-with-stroke.contextmenu-active::after, [dir] .button.button-large.button-with-stroke:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-with-stroke.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-large.button-with-stroke::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-large.button-with-stroke::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-large.button-with-stroke::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-large.button-with-stroke.contextmenu-active, [dir] .button.button-large.button-with-stroke:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent; } | |
| [dir] .button.button-large.button-with-stroke.contextmenu-active::after, [dir] .button.button-large.button-with-stroke:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-with-stroke.contextmenu-active, [dir] .button.button-large.button-with-stroke:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| [dir] .button.button-large.button-with-stroke.contextmenu-active::after, [dir] .button.button-large.button-with-stroke:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } } | |
| [dir] .button.button-large.button-with-stroke:not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-large.button-with-stroke:not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-large.button-with-stroke.contextmenu-active, [dir] .button.button-large.button-with-stroke:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-with-stroke.contextmenu-active, [dir] .button.button-large.button-with-stroke:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-large.button-with-stroke.added, .button.button-large.button-with-stroke.active { | |
| height: 48px; | |
| line-height: 46px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-large.button-with-stroke.added, [dir] .button.button-large.button-with-stroke.active { | |
| padding-top: 1px; | |
| border-radius: 24px; | |
| background: rgba(24, 24, 24, 0.7); | |
| transition-property: transform, box-shadow, color, background-color; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-large.button-with-stroke.added, [dir=ltr] .button.button-large.button-with-stroke.active { | |
| padding-left: 48px; | |
| padding-right: 48px; } | |
| [dir=rtl] .button.button-large.button-with-stroke.added, [dir=rtl] .button.button-large.button-with-stroke.active { | |
| padding-right: 48px; | |
| padding-left: 48px; } | |
| [dir] .button.button-large.button-with-stroke.added .b-alt-text, [dir] .button.button-large.button-with-stroke.active .b-alt-text { | |
| margin-top: -46px; } | |
| [dir] .button.button-large.button-with-stroke.added.contextmenu-active, [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-large.button-with-stroke.active.contextmenu-active, [dir] .button.button-large.button-with-stroke.active:not(:disabled):hover { | |
| background-color: rgba(24, 24, 24, 0.7); } | |
| .button.button-large.button-with-stroke.added:not(:disabled):hover:active, .button.button-large.button-with-stroke.active:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover:active, [dir] .button.button-large.button-with-stroke.active:not(:disabled):hover:active { | |
| background: rgba(24, 24, 24, 0.7); | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover:active, [dir] .button.button-large.button-with-stroke.active:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-with-stroke.added, [dir] .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); } | |
| [dir] .button.button-large.button-with-stroke.added::after, [dir] .button.button-large.button-with-stroke.active::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-with-stroke.added::after, [dir] .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); } | |
| [dir] .button.button-large.button-with-stroke.added.contextmenu-active, [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-large.button-with-stroke.active.contextmenu-active, [dir] .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) { | |
| [dir] .button.button-large.button-with-stroke.added.contextmenu-active, [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-large.button-with-stroke.active.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-large.button-with-stroke.added.contextmenu-active::after, [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover::after, [dir] .button.button-large.button-with-stroke.active.contextmenu-active::after, [dir] .button.button-large.button-with-stroke.active:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-with-stroke.added.contextmenu-active::after, [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover::after, [dir] .button.button-large.button-with-stroke.active.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-large.button-with-stroke.added::after, [dir] .button.button-large.button-with-stroke.active::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-large.button-with-stroke.added::after, [dir=ltr] .button.button-large.button-with-stroke.active::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-large.button-with-stroke.added::after, [dir=rtl] .button.button-large.button-with-stroke.active::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-large.button-with-stroke.added.contextmenu-active, [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-large.button-with-stroke.active.contextmenu-active, [dir] .button.button-large.button-with-stroke.active:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent; } | |
| [dir] .button.button-large.button-with-stroke.added.contextmenu-active::after, [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover::after, [dir] .button.button-large.button-with-stroke.active.contextmenu-active::after, [dir] .button.button-large.button-with-stroke.active:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-with-stroke.added.contextmenu-active, [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-large.button-with-stroke.active.contextmenu-active, [dir] .button.button-large.button-with-stroke.active:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| [dir] .button.button-large.button-with-stroke.added.contextmenu-active::after, [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover::after, [dir] .button.button-large.button-with-stroke.active.contextmenu-active::after, [dir] .button.button-large.button-with-stroke.active:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } } | |
| [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover:active, [dir] .button.button-large.button-with-stroke.active:not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover:active::after, [dir] .button.button-large.button-with-stroke.active:not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-large.button-with-stroke.added.contextmenu-active, [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-large.button-with-stroke.active.contextmenu-active, [dir] .button.button-large.button-with-stroke.active:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-with-stroke.added.contextmenu-active, [dir] .button.button-large.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-large.button-with-stroke.active.contextmenu-active, [dir] .button.button-large.button-with-stroke.active:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-large.button-facebook { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| font-size: 14px; } | |
| [dir] .button.button-large.button-facebook { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: #3b5998; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-large.button-facebook { | |
| padding-left: 32px; | |
| padding-right: 32px; } | |
| [dir=rtl] .button.button-large.button-facebook { | |
| padding-right: 32px; | |
| padding-left: 32px; } | |
| [dir] .button.button-large.button-facebook .b-alt-text { | |
| margin-top: -30px; } | |
| .button.button-large.button-facebook.contextmenu-active, .button.button-large.button-facebook:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-large.button-facebook.contextmenu-active, [dir] .button.button-large.button-facebook:not(:disabled):hover { | |
| background-color: #3762ba; } | |
| .button.button-large.button-facebook:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-large.button-facebook:not(:disabled):hover:active { | |
| background: #365284; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-facebook:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-facebook::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-facebook.contextmenu-active, [dir] .button.button-large.button-facebook:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-facebook.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-large.button-facebook.contextmenu-active::after, [dir] .button.button-large.button-facebook:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-facebook.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-large.button-facebook:not(:disabled):hover { | |
| transform: scale(1.0625); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-facebook:not(:disabled):hover { | |
| transform: scale(1.0625); } } | |
| .button.button-large.button-icon-only { | |
| height: 48px; | |
| line-height: 46px; | |
| color: #b3b3b3; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| width: 48px; | |
| font-size: 14px; } | |
| [dir] .button.button-large.button-icon-only { | |
| padding-top: 1px; | |
| border-radius: 24px; | |
| background: transparent; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-large.button-icon-only { | |
| padding-left: 48px; | |
| padding-right: 48px; | |
| padding-left: 0; | |
| padding-right: 0; } | |
| [dir=rtl] .button.button-large.button-icon-only { | |
| padding-right: 48px; | |
| padding-left: 48px; | |
| padding-right: 0; | |
| padding-left: 0; } | |
| [dir] .button.button-large.button-icon-only .b-alt-text { | |
| margin-top: -46px; } | |
| .button.button-large.button-icon-only.contextmenu-active, .button.button-large.button-icon-only:not(:disabled):hover { | |
| color: #ffffff; } | |
| [dir] .button.button-large.button-icon-only.contextmenu-active, [dir] .button.button-large.button-icon-only:not(:disabled):hover { | |
| background-color: transparent; } | |
| .button.button-large.button-icon-only:not(:disabled):hover:active { | |
| color: #a0a0a0; } | |
| [dir] .button.button-large.button-icon-only:not(:disabled):hover:active { | |
| background: transparent; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-icon-only:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-icon-only::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-icon-only.contextmenu-active, [dir] .button.button-large.button-icon-only:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-icon-only.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-large.button-icon-only.contextmenu-active::after, [dir] .button.button-large.button-icon-only:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-icon-only.contextmenu-active::after, [dir] .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; | |
| line-height: 48px; | |
| font-size: 24px; | |
| width: calc(100% - 12px); } | |
| [dir] .button.button-large.button-icon-only::before { | |
| border-radius: 500px; } | |
| [dir=ltr] .button.button-large.button-icon-only::before { | |
| left: 0; | |
| right: 0; | |
| text-align: left; | |
| padding-left: 12px; } | |
| [dir=rtl] .button.button-large.button-icon-only::before { | |
| right: 0; | |
| left: 0; | |
| text-align: right; | |
| padding-right: 12px; } | |
| .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; } | |
| [dir] .button.button-large.button-icon-only.button-play.playing:not(:hover), [dir] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover), [dir] .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; } | |
| [dir] .button.button-large.button-icon-only.button-play.playing:not(:hover)::after, [dir] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover)::after, [dir] .card.playing .button.button-large.button-icon-only.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .button.button-large.button-icon-only.button-play.playing:not(:hover)::after, [dir=ltr] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover)::after, [dir=ltr] .card.playing .button.button-large.button-icon-only.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-large.button-icon-only.button-play.playing:not(:hover)::after, [dir=rtl] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover)::after, [dir=rtl] .card.playing .button.button-large.button-icon-only.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-large.button-icon-only.button-play.playing:not(:hover).contextmenu-active, [dir] .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .button.button-large.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, [dir] .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .button.button-large.button-icon-only.button-play.playing:not(:hover).contextmenu-active, [dir] .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .button.button-large.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, [dir] .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active, [dir] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .button.button-large.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active::after, [dir] .tl-row.playing .button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover), [dir] .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; } | |
| [dir] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover)::after, [dir] .card.playing.button.button-large.button-icon-only.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover)::after, [dir=ltr] .card.playing.button.button-large.button-icon-only.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover)::after, [dir=rtl] .card.playing.button.button-large.button-icon-only.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.button.button-large.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .card.playing.button.button-large.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| .tl-row.playing.button.button-large.button-icon-only.button-play:not(:hover)::before, | |
| .card.playing.button.button-large.button-icon-only.button-play:not(:hover)::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f1DB"; | |
| font-size: 24px; | |
| line-height: 48px; } | |
| .tl-row.playing.button.button-large.button-icon-only.button-play:hover::before, | |
| .card.playing.button.button-large.button-icon-only.button-play:hover::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f1D3"; | |
| font-size: 24px; | |
| line-height: 48px; } | |
| .button.button-large.button-icon-only.active { | |
| color: #1ed760; } | |
| .button.button-large.button-icon-only.active.contextmenu-active, .button.button-large.button-icon-only.active:not(:disabled):hover { | |
| color: #1df369; } | |
| .button.button-large.button-icon-only.active:not(:disabled):hover:active { | |
| color: #18ac4d; } | |
| .button.button-large.button-icon-only.drop-target-active { | |
| color: #4c3337; } | |
| [dir] .button.button-large.button-icon-only.drop-target-active { | |
| background-color: #ffffff; } | |
| .button.button-large.button-icon-only.drop-target-active.contextmenu-active, .button.button-large.button-icon-only.drop-target-active:not(:disabled):hover { | |
| color: #4c3337; } | |
| .button.button-large.button-icon-only.drop-target-active:not(:disabled):hover:active { | |
| color: black; } | |
| [dir] .button.button-large.button-icon-only.drop-target-active.contextmenu-active, [dir] .button.button-large.button-icon-only.drop-target-active:not(:disabled):hover { | |
| background-color: #ffffff; } | |
| .button.button-large.button-icon-with-stroke { | |
| height: 48px; | |
| line-height: 46px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| width: 48px; | |
| font-size: 14px; } | |
| [dir] .button.button-large.button-icon-with-stroke { | |
| padding-top: 1px; | |
| border-radius: 24px; | |
| background: rgba(24, 24, 24, 0.7); | |
| transition-property: transform, box-shadow, color, background-color; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-large.button-icon-with-stroke { | |
| padding-left: 48px; | |
| padding-right: 48px; | |
| padding-left: 0; | |
| padding-right: 0; } | |
| [dir=rtl] .button.button-large.button-icon-with-stroke { | |
| padding-right: 48px; | |
| padding-left: 48px; | |
| padding-right: 0; | |
| padding-left: 0; } | |
| [dir] .button.button-large.button-icon-with-stroke .b-alt-text { | |
| margin-top: -46px; } | |
| [dir] .button.button-large.button-icon-with-stroke.contextmenu-active, [dir] .button.button-large.button-icon-with-stroke:not(:disabled):hover { | |
| background-color: rgba(24, 24, 24, 0.7); } | |
| .button.button-large.button-icon-with-stroke:not(:disabled):hover:active { | |
| color: #a0a0a0; } | |
| [dir] .button.button-large.button-icon-with-stroke:not(:disabled):hover:active { | |
| background: rgba(24, 24, 24, 0.7); | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-icon-with-stroke:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-icon-with-stroke::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-large.button-icon-with-stroke.contextmenu-active, [dir] .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) { | |
| [dir] .button.button-large.button-icon-with-stroke.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-large.button-icon-with-stroke.contextmenu-active::after, [dir] .button.button-large.button-icon-with-stroke:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-icon-with-stroke.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-large.button-icon-with-stroke::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-large.button-icon-with-stroke::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-large.button-icon-with-stroke::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-large.button-icon-with-stroke.contextmenu-active, [dir] .button.button-large.button-icon-with-stroke:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent; } | |
| [dir] .button.button-large.button-icon-with-stroke.contextmenu-active::after, [dir] .button.button-large.button-icon-with-stroke:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-icon-with-stroke.contextmenu-active, [dir] .button.button-large.button-icon-with-stroke:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| [dir] .button.button-large.button-icon-with-stroke.contextmenu-active::after, [dir] .button.button-large.button-icon-with-stroke:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } } | |
| [dir] .button.button-large.button-icon-with-stroke:not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-large.button-icon-with-stroke:not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-large.button-icon-with-stroke.contextmenu-active, [dir] .button.button-large.button-icon-with-stroke:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-large.button-icon-with-stroke.contextmenu-active, [dir] .button.button-large.button-icon-with-stroke:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .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; | |
| line-height: 48px; | |
| font-size: 24px; | |
| width: calc(100% - 12px); } | |
| [dir] .button.button-large.button-icon-with-stroke::before { | |
| border-radius: 500px; } | |
| [dir=ltr] .button.button-large.button-icon-with-stroke::before { | |
| left: 0; | |
| right: 0; | |
| text-align: left; | |
| padding-left: 12px; } | |
| [dir=rtl] .button.button-large.button-icon-with-stroke::before { | |
| right: 0; | |
| left: 0; | |
| text-align: right; | |
| padding-right: 12px; } | |
| .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; } | |
| [dir] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover), [dir] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover), [dir] .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; } | |
| [dir] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover)::after, [dir] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, [dir] .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; } | |
| [dir=ltr] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover)::after, [dir=ltr] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, [dir=ltr] .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover)::after, [dir=rtl] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, [dir=rtl] .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, [dir] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, [dir] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, [dir] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, [dir] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .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; } } | |
| [dir] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active, [dir] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, [dir] .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; } | |
| [dir] .button.button-large.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active::after, [dir] .tl-row.playing .button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover), [dir] .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; } | |
| [dir] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, [dir] .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; } | |
| [dir=ltr] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, [dir=ltr] .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after, [dir=rtl] .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .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; } } | |
| [dir] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::before, | |
| .card.playing.button.button-large.button-icon-with-stroke.button-play:not(:hover)::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f1DB"; | |
| font-size: 24px; | |
| line-height: 48px; } | |
| .tl-row.playing.button.button-large.button-icon-with-stroke.button-play:hover::before, | |
| .card.playing.button.button-large.button-icon-with-stroke.button-play:hover::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f1D3"; | |
| font-size: 24px; | |
| line-height: 48px; } | |
| .button.button-small.button-green { | |
| height: 24px; | |
| line-height: 22px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-small.button-green { | |
| padding-top: 1px; | |
| border-radius: 12px; | |
| background: #1db954; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-small.button-green { | |
| padding-left: 24px; | |
| padding-right: 24px; } | |
| [dir=rtl] .button.button-small.button-green { | |
| padding-right: 24px; | |
| padding-left: 24px; } | |
| [dir] .button.button-small.button-green .b-alt-text { | |
| margin-top: -22px; } | |
| .button.button-small.button-green.contextmenu-active, .button.button-small.button-green:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-small.button-green.contextmenu-active, [dir] .button.button-small.button-green:not(:disabled):hover { | |
| background-color: #1ed760; } | |
| .button.button-small.button-green:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-small.button-green:not(:disabled):hover:active { | |
| background: #14833b; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-green:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-green::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-green.contextmenu-active, [dir] .button.button-small.button-green:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-green.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-small.button-green.contextmenu-active::after, [dir] .button.button-small.button-green:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-green.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-small.button-green:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-green:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-small.button-white { | |
| height: 24px; | |
| line-height: 22px; | |
| color: #4c3337; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-small.button-white { | |
| padding-top: 1px; | |
| border-radius: 12px; | |
| background: #ffffff; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-small.button-white { | |
| padding-left: 24px; | |
| padding-right: 24px; } | |
| [dir=rtl] .button.button-small.button-white { | |
| padding-right: 24px; | |
| padding-left: 24px; } | |
| [dir] .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: #4c3337; } | |
| [dir] .button.button-small.button-white.contextmenu-active, [dir] .button.button-small.button-white:not(:disabled):hover { | |
| background-color: #ffffff; } | |
| .button.button-small.button-white:not(:disabled):hover:active { | |
| color: #4c3337; } | |
| [dir] .button.button-small.button-white:not(:disabled):hover:active { | |
| background: #b3b3b3; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-white:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-white::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-white.contextmenu-active, [dir] .button.button-small.button-white:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-white.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-small.button-white.contextmenu-active::after, [dir] .button.button-small.button-white:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-white.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-small.button-white:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-white:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-small.button-blue { | |
| height: 24px; | |
| line-height: 22px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-small.button-blue { | |
| padding-top: 1px; | |
| border-radius: 12px; | |
| background: #4687d6; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-small.button-blue { | |
| padding-left: 24px; | |
| padding-right: 24px; } | |
| [dir=rtl] .button.button-small.button-blue { | |
| padding-right: 24px; | |
| padding-left: 24px; } | |
| [dir] .button.button-small.button-blue .b-alt-text { | |
| margin-top: -22px; } | |
| .button.button-small.button-blue.contextmenu-active, .button.button-small.button-blue:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-small.button-blue.contextmenu-active, [dir] .button.button-small.button-blue:not(:disabled):hover { | |
| background-color: #2e77d0; } | |
| .button.button-small.button-blue:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-small.button-blue:not(:disabled):hover:active { | |
| background: #1d4c85; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-blue:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-blue::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-blue.contextmenu-active, [dir] .button.button-small.button-blue:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-blue.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-small.button-blue.contextmenu-active::after, [dir] .button.button-small.button-blue:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-blue.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-small.button-blue:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-blue:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-small.button-red { | |
| height: 24px; | |
| line-height: 22px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-small.button-red { | |
| padding-top: 1px; | |
| border-radius: 12px; | |
| background: #cd1a2b; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-small.button-red { | |
| padding-left: 24px; | |
| padding-right: 24px; } | |
| [dir=rtl] .button.button-small.button-red { | |
| padding-right: 24px; | |
| padding-left: 24px; } | |
| [dir] .button.button-small.button-red .b-alt-text { | |
| margin-top: -22px; } | |
| .button.button-small.button-red.contextmenu-active, .button.button-small.button-red:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-small.button-red.contextmenu-active, [dir] .button.button-small.button-red:not(:disabled):hover { | |
| background-color: #e22134; } | |
| .button.button-small.button-red:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-small.button-red:not(:disabled):hover:active { | |
| background: #941320; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-red:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-red::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-red.contextmenu-active, [dir] .button.button-small.button-red:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-red.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-small.button-red.contextmenu-active::after, [dir] .button.button-small.button-red:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-red.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-small.button-red:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-red:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-small.button-gray { | |
| height: 24px; | |
| line-height: 22px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-small.button-gray { | |
| padding-top: 1px; | |
| border-radius: 12px; | |
| background: #614348; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-small.button-gray { | |
| padding-left: 24px; | |
| padding-right: 24px; } | |
| [dir=rtl] .button.button-small.button-gray { | |
| padding-right: 24px; | |
| padding-left: 24px; } | |
| [dir] .button.button-small.button-gray .b-alt-text { | |
| margin-top: -22px; } | |
| .button.button-small.button-gray.contextmenu-active, .button.button-small.button-gray:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-small.button-gray.contextmenu-active, [dir] .button.button-small.button-gray:not(:disabled):hover { | |
| background-color: #535353; } | |
| .button.button-small.button-gray:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-small.button-gray:not(:disabled):hover:active { | |
| background: #614348; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-gray:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-gray::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-gray.contextmenu-active, [dir] .button.button-small.button-gray:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-gray.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-small.button-gray.contextmenu-active::after, [dir] .button.button-small.button-gray:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-gray.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-small.button-gray:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-gray:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-small.button-with-stroke { | |
| height: 24px; | |
| line-height: 22px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-small.button-with-stroke { | |
| padding-top: 1px; | |
| border-radius: 12px; | |
| background: rgba(24, 24, 24, 0.7); | |
| transition-property: transform, box-shadow, color, background-color; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-small.button-with-stroke { | |
| padding-left: 24px; | |
| padding-right: 24px; } | |
| [dir=rtl] .button.button-small.button-with-stroke { | |
| padding-right: 24px; | |
| padding-left: 24px; } | |
| [dir] .button.button-small.button-with-stroke .b-alt-text { | |
| margin-top: -22px; } | |
| [dir] .button.button-small.button-with-stroke.contextmenu-active, [dir] .button.button-small.button-with-stroke:not(:disabled):hover { | |
| background-color: rgba(24, 24, 24, 0.7); } | |
| .button.button-small.button-with-stroke:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-small.button-with-stroke:not(:disabled):hover:active { | |
| background: rgba(24, 24, 24, 0.7); | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-with-stroke:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-with-stroke::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-with-stroke.contextmenu-active, [dir] .button.button-small.button-with-stroke:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-with-stroke.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-small.button-with-stroke.contextmenu-active::after, [dir] .button.button-small.button-with-stroke:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-with-stroke.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-small.button-with-stroke::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-small.button-with-stroke::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-small.button-with-stroke::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-small.button-with-stroke.contextmenu-active, [dir] .button.button-small.button-with-stroke:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent; } | |
| [dir] .button.button-small.button-with-stroke.contextmenu-active::after, [dir] .button.button-small.button-with-stroke:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-with-stroke.contextmenu-active, [dir] .button.button-small.button-with-stroke:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| [dir] .button.button-small.button-with-stroke.contextmenu-active::after, [dir] .button.button-small.button-with-stroke:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } } | |
| [dir] .button.button-small.button-with-stroke:not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-small.button-with-stroke:not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-small.button-with-stroke.contextmenu-active, [dir] .button.button-small.button-with-stroke:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-with-stroke.contextmenu-active, [dir] .button.button-small.button-with-stroke:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-small.button-with-stroke.added, .button.button-small.button-with-stroke.active { | |
| height: 24px; | |
| line-height: 22px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-small.button-with-stroke.added, [dir] .button.button-small.button-with-stroke.active { | |
| padding-top: 1px; | |
| border-radius: 12px; | |
| background: rgba(24, 24, 24, 0.7); | |
| transition-property: transform, box-shadow, color, background-color; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-small.button-with-stroke.added, [dir=ltr] .button.button-small.button-with-stroke.active { | |
| padding-left: 24px; | |
| padding-right: 24px; } | |
| [dir=rtl] .button.button-small.button-with-stroke.added, [dir=rtl] .button.button-small.button-with-stroke.active { | |
| padding-right: 24px; | |
| padding-left: 24px; } | |
| [dir] .button.button-small.button-with-stroke.added .b-alt-text, [dir] .button.button-small.button-with-stroke.active .b-alt-text { | |
| margin-top: -22px; } | |
| [dir] .button.button-small.button-with-stroke.added.contextmenu-active, [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-small.button-with-stroke.active.contextmenu-active, [dir] .button.button-small.button-with-stroke.active:not(:disabled):hover { | |
| background-color: rgba(24, 24, 24, 0.7); } | |
| .button.button-small.button-with-stroke.added:not(:disabled):hover:active, .button.button-small.button-with-stroke.active:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover:active, [dir] .button.button-small.button-with-stroke.active:not(:disabled):hover:active { | |
| background: rgba(24, 24, 24, 0.7); | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover:active, [dir] .button.button-small.button-with-stroke.active:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-with-stroke.added, [dir] .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); } | |
| [dir] .button.button-small.button-with-stroke.added::after, [dir] .button.button-small.button-with-stroke.active::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-with-stroke.added::after, [dir] .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); } | |
| [dir] .button.button-small.button-with-stroke.added.contextmenu-active, [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-small.button-with-stroke.active.contextmenu-active, [dir] .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) { | |
| [dir] .button.button-small.button-with-stroke.added.contextmenu-active, [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-small.button-with-stroke.active.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-small.button-with-stroke.added.contextmenu-active::after, [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover::after, [dir] .button.button-small.button-with-stroke.active.contextmenu-active::after, [dir] .button.button-small.button-with-stroke.active:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-with-stroke.added.contextmenu-active::after, [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover::after, [dir] .button.button-small.button-with-stroke.active.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-small.button-with-stroke.added::after, [dir] .button.button-small.button-with-stroke.active::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-small.button-with-stroke.added::after, [dir=ltr] .button.button-small.button-with-stroke.active::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-small.button-with-stroke.added::after, [dir=rtl] .button.button-small.button-with-stroke.active::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-small.button-with-stroke.added.contextmenu-active, [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-small.button-with-stroke.active.contextmenu-active, [dir] .button.button-small.button-with-stroke.active:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent; } | |
| [dir] .button.button-small.button-with-stroke.added.contextmenu-active::after, [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover::after, [dir] .button.button-small.button-with-stroke.active.contextmenu-active::after, [dir] .button.button-small.button-with-stroke.active:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-with-stroke.added.contextmenu-active, [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-small.button-with-stroke.active.contextmenu-active, [dir] .button.button-small.button-with-stroke.active:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| [dir] .button.button-small.button-with-stroke.added.contextmenu-active::after, [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover::after, [dir] .button.button-small.button-with-stroke.active.contextmenu-active::after, [dir] .button.button-small.button-with-stroke.active:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } } | |
| [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover:active, [dir] .button.button-small.button-with-stroke.active:not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover:active::after, [dir] .button.button-small.button-with-stroke.active:not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-small.button-with-stroke.added.contextmenu-active, [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-small.button-with-stroke.active.contextmenu-active, [dir] .button.button-small.button-with-stroke.active:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-with-stroke.added.contextmenu-active, [dir] .button.button-small.button-with-stroke.added:not(:disabled):hover, [dir] .button.button-small.button-with-stroke.active.contextmenu-active, [dir] .button.button-small.button-with-stroke.active:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .button.button-small.button-facebook { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .button.button-small.button-facebook { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: #3b5998; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-small.button-facebook { | |
| padding-left: 32px; | |
| padding-right: 32px; } | |
| [dir=rtl] .button.button-small.button-facebook { | |
| padding-right: 32px; | |
| padding-left: 32px; } | |
| [dir] .button.button-small.button-facebook .b-alt-text { | |
| margin-top: -30px; } | |
| .button.button-small.button-facebook.contextmenu-active, .button.button-small.button-facebook:not(:disabled):hover { | |
| color: white; } | |
| [dir] .button.button-small.button-facebook.contextmenu-active, [dir] .button.button-small.button-facebook:not(:disabled):hover { | |
| background-color: #3762ba; } | |
| .button.button-small.button-facebook:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| [dir] .button.button-small.button-facebook:not(:disabled):hover:active { | |
| background: #365284; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-facebook:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-facebook::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-facebook.contextmenu-active, [dir] .button.button-small.button-facebook:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-facebook.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-small.button-facebook.contextmenu-active::after, [dir] .button.button-small.button-facebook:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-facebook.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-small.button-facebook:not(:disabled):hover { | |
| transform: scale(1.0625); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-facebook:not(:disabled):hover { | |
| transform: scale(1.0625); } } | |
| .button.button-small.button-icon-only { | |
| height: 24px; | |
| line-height: 22px; | |
| color: #b3b3b3; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| width: 24px; } | |
| [dir] .button.button-small.button-icon-only { | |
| padding-top: 1px; | |
| border-radius: 12px; | |
| background: transparent; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .button.button-small.button-icon-only { | |
| padding-left: 24px; | |
| padding-right: 24px; | |
| padding-left: 0; | |
| padding-right: 0; } | |
| [dir=rtl] .button.button-small.button-icon-only { | |
| padding-right: 24px; | |
| padding-left: 24px; | |
| padding-right: 0; | |
| padding-left: 0; } | |
| [dir] .button.button-small.button-icon-only .b-alt-text { | |
| margin-top: -22px; } | |
| .button.button-small.button-icon-only.contextmenu-active, .button.button-small.button-icon-only:not(:disabled):hover { | |
| color: #ffffff; } | |
| [dir] .button.button-small.button-icon-only.contextmenu-active, [dir] .button.button-small.button-icon-only:not(:disabled):hover { | |
| background-color: transparent; } | |
| .button.button-small.button-icon-only:not(:disabled):hover:active { | |
| color: #a0a0a0; } | |
| [dir] .button.button-small.button-icon-only:not(:disabled):hover:active { | |
| background: transparent; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-icon-only:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-icon-only::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-icon-only.contextmenu-active, [dir] .button.button-small.button-icon-only:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-icon-only.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-small.button-icon-only.contextmenu-active::after, [dir] .button.button-small.button-icon-only:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-icon-only.contextmenu-active::after, [dir] .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; | |
| line-height: 24px; | |
| font-size: 12px; | |
| width: calc(100% - 6px); } | |
| [dir] .button.button-small.button-icon-only::before { | |
| border-radius: 500px; } | |
| [dir=ltr] .button.button-small.button-icon-only::before { | |
| left: 0; | |
| right: 0; | |
| text-align: left; | |
| padding-left: 6px; } | |
| [dir=rtl] .button.button-small.button-icon-only::before { | |
| right: 0; | |
| left: 0; | |
| text-align: right; | |
| padding-right: 6px; } | |
| .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; } | |
| [dir] .button.button-small.button-icon-only.button-play.playing:not(:hover), [dir] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover), [dir] .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; } | |
| [dir] .button.button-small.button-icon-only.button-play.playing:not(:hover)::after, [dir] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover)::after, [dir] .card.playing .button.button-small.button-icon-only.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .button.button-small.button-icon-only.button-play.playing:not(:hover)::after, [dir=ltr] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover)::after, [dir=ltr] .card.playing .button.button-small.button-icon-only.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-small.button-icon-only.button-play.playing:not(:hover)::after, [dir=rtl] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover)::after, [dir=rtl] .card.playing .button.button-small.button-icon-only.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-small.button-icon-only.button-play.playing:not(:hover).contextmenu-active, [dir] .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .button.button-small.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, [dir] .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .button.button-small.button-icon-only.button-play.playing:not(:hover).contextmenu-active, [dir] .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .button.button-small.button-icon-only.button-play.playing:not(:hover).contextmenu-active::after, [dir] .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active, [dir] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .button.button-small.button-icon-only.button-play.playing:not(:hover):not(:disabled):hover:active::after, [dir] .tl-row.playing .button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover), [dir] .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; } | |
| [dir] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover)::after, [dir] .card.playing.button.button-small.button-icon-only.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover)::after, [dir=ltr] .card.playing.button.button-small.button-icon-only.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover)::after, [dir=rtl] .card.playing.button.button-small.button-icon-only.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active, [dir] .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.button.button-small.button-icon-only.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .card.playing.button.button-small.button-icon-only.button-play:not(:hover):not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| .tl-row.playing.button.button-small.button-icon-only.button-play:not(:hover)::before, | |
| .card.playing.button.button-small.button-icon-only.button-play:not(:hover)::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f15e"; | |
| font-size: 12px; | |
| line-height: 24px; } | |
| .tl-row.playing.button.button-small.button-icon-only.button-play:hover::before, | |
| .card.playing.button.button-small.button-icon-only.button-play:hover::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f130"; | |
| font-size: 12px; | |
| line-height: 24px; } | |
| .button.button-small.button-icon-only.active { | |
| color: #1ed760; } | |
| .button.button-small.button-icon-only.active.contextmenu-active, .button.button-small.button-icon-only.active:not(:disabled):hover { | |
| color: #1df369; } | |
| .button.button-small.button-icon-only.active:not(:disabled):hover:active { | |
| color: #18ac4d; } | |
| .button.button-small.button-icon-only.drop-target-active { | |
| color: #4c3337; } | |
| [dir] .button.button-small.button-icon-only.drop-target-active { | |
| background-color: #ffffff; } | |
| .button.button-small.button-icon-only.drop-target-active.contextmenu-active, .button.button-small.button-icon-only.drop-target-active:not(:disabled):hover { | |
| color: #4c3337; } | |
| .button.button-small.button-icon-only.drop-target-active:not(:disabled):hover:active { | |
| color: black; } | |
| [dir] .button.button-small.button-icon-only.drop-target-active.contextmenu-active, [dir] .button.button-small.button-icon-only.drop-target-active:not(:disabled):hover { | |
| background-color: #ffffff; } | |
| .button.button-small.button-icon-with-stroke { | |
| height: 24px; | |
| line-height: 22px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| width: 24px; } | |
| [dir] .button.button-small.button-icon-with-stroke { | |
| padding-top: 1px; | |
| border-radius: 12px; | |
| background: rgba(24, 24, 24, 0.7); | |
| transition-property: transform, box-shadow, color, background-color; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-small.button-icon-with-stroke { | |
| padding-left: 24px; | |
| padding-right: 24px; | |
| padding-left: 0; | |
| padding-right: 0; } | |
| [dir=rtl] .button.button-small.button-icon-with-stroke { | |
| padding-right: 24px; | |
| padding-left: 24px; | |
| padding-right: 0; | |
| padding-left: 0; } | |
| [dir] .button.button-small.button-icon-with-stroke .b-alt-text { | |
| margin-top: -22px; } | |
| [dir] .button.button-small.button-icon-with-stroke.contextmenu-active, [dir] .button.button-small.button-icon-with-stroke:not(:disabled):hover { | |
| background-color: rgba(24, 24, 24, 0.7); } | |
| .button.button-small.button-icon-with-stroke:not(:disabled):hover:active { | |
| color: #a0a0a0; } | |
| [dir] .button.button-small.button-icon-with-stroke:not(:disabled):hover:active { | |
| background: rgba(24, 24, 24, 0.7); | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-icon-with-stroke:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-icon-with-stroke::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .button.button-small.button-icon-with-stroke.contextmenu-active, [dir] .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) { | |
| [dir] .button.button-small.button-icon-with-stroke.contextmenu-active, [dir] .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); } | |
| [dir] .button.button-small.button-icon-with-stroke.contextmenu-active::after, [dir] .button.button-small.button-icon-with-stroke:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-icon-with-stroke.contextmenu-active::after, [dir] .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; } | |
| [dir] .button.button-small.button-icon-with-stroke::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .button.button-small.button-icon-with-stroke::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-small.button-icon-with-stroke::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-small.button-icon-with-stroke.contextmenu-active, [dir] .button.button-small.button-icon-with-stroke:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent; } | |
| [dir] .button.button-small.button-icon-with-stroke.contextmenu-active::after, [dir] .button.button-small.button-icon-with-stroke:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-icon-with-stroke.contextmenu-active, [dir] .button.button-small.button-icon-with-stroke:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| [dir] .button.button-small.button-icon-with-stroke.contextmenu-active::after, [dir] .button.button-small.button-icon-with-stroke:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } } | |
| [dir] .button.button-small.button-icon-with-stroke:not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-small.button-icon-with-stroke:not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .button.button-small.button-icon-with-stroke.contextmenu-active, [dir] .button.button-small.button-icon-with-stroke:not(:disabled):hover { | |
| transform: scale(1.08333); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button.button-small.button-icon-with-stroke.contextmenu-active, [dir] .button.button-small.button-icon-with-stroke:not(:disabled):hover { | |
| transform: scale(1.08333); } } | |
| .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; | |
| line-height: 24px; | |
| font-size: 12px; | |
| width: calc(100% - 6px); } | |
| [dir] .button.button-small.button-icon-with-stroke::before { | |
| border-radius: 500px; } | |
| [dir=ltr] .button.button-small.button-icon-with-stroke::before { | |
| left: 0; | |
| right: 0; | |
| text-align: left; | |
| padding-left: 6px; } | |
| [dir=rtl] .button.button-small.button-icon-with-stroke::before { | |
| right: 0; | |
| left: 0; | |
| text-align: right; | |
| padding-right: 6px; } | |
| .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; } | |
| [dir] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover), [dir] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover), [dir] .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; } | |
| [dir] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover)::after, [dir] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, [dir] .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; } | |
| [dir=ltr] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover)::after, [dir=ltr] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, [dir=ltr] .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover)::after, [dir=rtl] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, [dir=rtl] .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, [dir] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, [dir] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active, [dir] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover).contextmenu-active::after, [dir] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .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; } } | |
| [dir] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active, [dir] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, [dir] .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; } | |
| [dir] .button.button-small.button-icon-with-stroke.button-play.playing:not(:hover):not(:disabled):hover:active::after, [dir] .tl-row.playing .button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover), [dir] .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; } | |
| [dir] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, [dir] .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; } | |
| [dir=ltr] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, [dir=ltr] .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after, [dir=rtl] .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active, [dir] .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover).contextmenu-active::after, [dir] .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; } } | |
| [dir] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active, [dir] .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; } | |
| [dir] .tl-row.playing.button.button-small.button-icon-with-stroke.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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); } | |
| [dir] .b-play-text, [dir] .b-pause-text, [dir] .b-add-text, [dir] .b-added-text, [dir] .b-remove-text { | |
| transition-property: opacity; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .b-play-text, [dir] .b-pause-text, [dir] .b-add-text, [dir] .b-added-text, [dir] .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); } | |
| [dir] .button:hover .b-play-text, [dir] .button:hover .b-pause-text, [dir] .button:hover .b-add-text, [dir] .button:hover .b-added-text, [dir] .button:hover .b-remove-text { | |
| transition-property: opacity; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .button:hover .b-play-text, [dir] .button:hover .b-pause-text, [dir] .button:hover .b-add-text, [dir] .button:hover .b-added-text, [dir] .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"; } | |
| .nft-enabled .button-header-add::before, .nft-enabled .button-header-add.just-changed::before { | |
| content: "\f320"; } | |
| .nft-enabled .button-header-add.added::before, .nft-enabled .button-header-add.added:hover::before, .nft-enabled .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; } | |
| [dir] .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; } | |
| [dir] .added .button-add.just-changed, [dir] .added .button-add.stay-added, [dir] .button-add.added.just-changed, [dir] .button-add.added.stay-added { | |
| border-color: #1db954; } | |
| .added .button-add.just-changed .b-remove-text, .added .button-add.stay-added .b-remove-text, | |
| .button-add.added.just-changed .b-remove-text, | |
| .button-add.added.stay-added .b-remove-text { | |
| opacity: 0; } | |
| .added .button-add.just-changed .b-added-text, .added .button-add.stay-added .b-added-text, | |
| .button-add.added.just-changed .b-added-text, | |
| .button-add.added.stay-added .b-added-text { | |
| opacity: 1; } | |
| .added .button-add.just-changed.button-icon-only::before, .added .button-add.just-changed.button-icon-with-stroke::before, .added .button-add.stay-added.button-icon-only::before, .added .button-add.stay-added.button-icon-with-stroke::before, | |
| .button-add.added.just-changed.button-icon-only::before, | |
| .button-add.added.just-changed.button-icon-with-stroke::before, | |
| .button-add.added.stay-added.button-icon-only::before, | |
| .button-add.added.stay-added.button-icon-with-stroke::before { | |
| content: "\f10a"; } | |
| .added .button-add:not(.button-icon-only):not(.button-icon-with-stroke), | |
| .button-add.added:not(.button-icon-only):not(.button-icon-with-stroke) { | |
| color: #1ed760; } | |
| .added .button-add:not(.button-icon-only):not(.button-icon-with-stroke).contextmenu-active, .added .button-add:not(.button-icon-only):not(.button-icon-with-stroke):not(:disabled):hover, | |
| .button-add.added:not(.button-icon-only):not(.button-icon-with-stroke).contextmenu-active, | |
| .button-add.added:not(.button-icon-only):not(.button-icon-with-stroke):not(:disabled):hover { | |
| color: #1ed760; } | |
| .added .button-add:not(.button-icon-only):not(.button-icon-with-stroke):not(:disabled):hover:active, | |
| .button-add.added:not(.button-icon-only):not(.button-icon-with-stroke):not(:disabled):hover:active { | |
| color: #18ac4d; } | |
| .nft-enabled .added .button.button-icon-only.button-add { | |
| color: #ffffff; } | |
| .nft-enabled .added .button.button-icon-only.button-add::before { | |
| content: "\f322"; } | |
| .nft-enabled.unlike-removes-entity .added .button-add:not(.just-changed):hover::before { | |
| content: "\f160"; } | |
| .nft-enabled button.button-icon-only.button-add { | |
| color: #ffffff; } | |
| /** | |
| * Standard buttons | |
| * | |
| * <span class="text-warning">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.</span> | |
| * | |
| * Markup: <button type="button" class="button {$modifiers}"> | |
| * Some button | |
| * </button> | |
| * <button type="button" class="button button-primary {$modifiers}"> | |
| * Some button | |
| * </button> | |
| * | |
| * Styleguide 25.1 | |
| */ | |
| /** | |
| * Icon buttons | |
| * | |
| * Styleguide 25.2 | |
| */ | |
| /** | |
| * With text | |
| * | |
| * Markup: <button type="button" class="button spoticon-radio-16"> | |
| * Start Radio | |
| * </button> | |
| * | |
| * Styleguide 25.2.1 | |
| */ | |
| /** | |
| * Without text | |
| * | |
| * Markup: <button type="button" class="button button-icon-only spoticon-more-16"></button> | |
| * <button type="button" class="button button-icon-only spoticon-plus-16"></button> | |
| * <button type="button" class="button button-icon-only spoticon-check-16"></button> | |
| * <button type="button" class="button button-icon-only spoticon-radio-16"></button> | |
| * <button type="button" class="button button-icon-only spoticon-pause-16"></button> | |
| * <button type="button" class="button button-icon-only spoticon-play-16"></button> | |
| * <button type="button" class="button button-icon-only spoticon-thumbs-down-16"></button> | |
| * <button type="button" class="button button-icon-only spoticon-thumbs-up-16"></button> | |
| * <button type="button" class="button button-icon-only spoticon-heart-16"></button> | |
| * <button type="button" class="button button-icon-only spoticon-ban-16"></button> | |
| * | |
| * Styleguide 25.2.2 | |
| */ | |
| /** | |
| * Without text and circle | |
| * | |
| * Markup: <button type="button" class="button button-icon-only button-no-border spoticon-more-16"></button> | |
| * <button type="button" class="button button-icon-only button-no-border spoticon-plus-16"></button> | |
| * <button type="button" class="button button-icon-only button-no-border spoticon-check-16"></button> | |
| * <button type="button" class="button button-icon-only button-no-border spoticon-radio-16"></button> | |
| * <button type="button" class="button button-icon-only button-no-border spoticon-pause-16"></button> | |
| * <button type="button" class="button button-icon-only button-no-border spoticon-play-16"></button> | |
| * <button type="button" class="button button-icon-only button-no-border spoticon-thumbs-down-16"></button> | |
| * <button type="button" class="button button-icon-only button-no-border spoticon-thumbs-up-16"></button> | |
| * <button type="button" class="button button-icon-only button-no-border spoticon-heart-16"></button> | |
| * <button type="button" class="button button-icon-only button-no-border spoticon-ban-16"></button> | |
| * | |
| * Styleguide 25.2.3 | |
| */ | |
| /** | |
| * Specific buttons | |
| * | |
| * Styleguide 25.3 | |
| */ | |
| /** | |
| * Play & Radio | |
| * | |
| * The play button will always have a playing/paused indicator, a play button should never just be text. | |
| * Most of the time you probably want play to be the primary action too, so add .button-primary. | |
| * | |
| * Markup: | |
| * <button type="button" class="button button-play"> | |
| * <div class="b-play-text">Play</div> | |
| * <div class="b-radio-text">Start Radio</div> | |
| * <div class="b-pause-text b-alt-text">Pause</div> | |
| * </button> | |
| * <button type="button" class="button button-play button-icon-only"> | |
| * <div class="b-play-text">Play</div> | |
| * <div class="b-radio-text">Start Radio</div> | |
| * <div class="b-pause-text b-alt-text">Pause</div> | |
| * </button> | |
| * <button type="button" class="button button-radio"> | |
| * <div class="b-play-text">Play</div> | |
| * <div class="b-radio-text">Start Radio</div> | |
| * <div class="b-pause-text b-alt-text">Pause</div> | |
| * </button> | |
| * <button type="button" class="button button-radio button-icon-only"> | |
| * <div class="b-play-text">Play</div> | |
| * <div class="b-radio-text">Start Radio</div> | |
| * <div class="b-pause-text b-alt-text">Pause</div> | |
| * </button> | |
| * <button type="button" class="button button-play button-primary"> | |
| * <div class="b-play-text">Play</div> | |
| * <div class="b-radio-text">Start Radio</div> | |
| * <div class="b-pause-text b-alt-text">Pause</div> | |
| * </button> | |
| * | |
| * Styleguide 25.3.1 | |
| */ | |
| /** | |
| * Save / Follow | |
| * | |
| * Markup: | |
| * <button type="button" class="button button-add" data-button="add"> | |
| * <div class="b-add-text">Save</div> | |
| * <div class="b-added-text b-alt-text">Saved</div> | |
| * <div class="b-remove-text b-alt-text">Remove</div> | |
| * </button> | |
| * <button type="button" class="button button-add button-icon-only" data-button="add"> | |
| * <div class="b-add-text">Save</div> | |
| * <div class="b-added-text b-alt-text">Saved</div> | |
| * <div class="b-remove-text b-alt-text">Remove</div> | |
| * </button> | |
| * <button type="button" class="button button-add" data-button="add"> | |
| * <div class="b-add-text">Follow</div> | |
| * <div class="b-added-text b-alt-text">Following</div> | |
| * <div class="b-remove-text b-alt-text">Unfollow</div> | |
| * </button> | |
| * <button type="button" class="button button-add button-icon-only" data-button="add"> | |
| * <div class="b-add-text">Follow</div> | |
| * <div class="b-added-text b-alt-text">Following</div> | |
| * <div class="b-remove-text b-alt-text">Unfollow</div> | |
| * </button> | |
| * | |
| * Styleguide 25.3.2 | |
| */ | |
| /** | |
| * In the style of an <a> tag | |
| * | |
| * Markup: <button class="button button-link">Take a Survey</button> | |
| * | |
| * Styleguide 25.3.3 | |
| */ | |
| /** | |
| * Button Groups | |
| * | |
| * Styleguide 25.4 | |
| */ | |
| /** | |
| * With Icons | |
| * | |
| * Markup: <div class="button-group"> | |
| * <button type="button" class="button button-icon-only spoticon-list-view-16"></button> | |
| * <button type="button" class="button button-icon-only spoticon-list-view-16 active"></button> | |
| * <button type="button" class="button button-icon-only spoticon-grid-view-16"></button> | |
| * <button type="button" class="button button-icon-only spoticon-grid-view-16 active"></button> | |
| * <button type="button" class="button button-icon-only spoticon-more-16"></button> | |
| * <button type="button" class="button button-icon-only spoticon-more-16 active"></button> | |
| * </div> | |
| * | |
| * Styleguide 25.4.1 | |
| */ | |
| /** | |
| * With Single letters | |
| * | |
| * Markup: <div class="button-group"> | |
| * <button type="button" class="button">A</button> | |
| * <button type="button" class="button active">A</button> | |
| * <button type="button" class="button">B</button> | |
| * <button type="button" class="button active">B</button> | |
| * <button type="button" class="button">C</button> | |
| * <button type="button" class="button active">C</button> | |
| * </div> | |
| * | |
| * Styleguide 25.4.2 | |
| */ | |
| /** | |
| * Forms | |
| * | |
| * Markup: <form role="form"> | |
| * <div class="form-group"> | |
| * <label for="exampleInputEmail1">Email address</label> | |
| * <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> | |
| * </div> | |
| * <div class="form-group"> | |
| * <label for="exampleInputPassword1">Password</label> | |
| * <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> | |
| * </div> | |
| * <div class="form-group"> | |
| * <label for="exampleInputFile">File input</label> | |
| * <input type="file" id="exampleInputFile"> | |
| * <p class="help-block">Example block-level help text here.</p> | |
| * </div> | |
| * <div class="checkbox"> | |
| * <label> | |
| * <input type="checkbox"> Check me out | |
| * </label> | |
| * </div> | |
| * <div class="form-group"> | |
| * <textarea style="height: 80px" class="form-control" placeholder="Type your message here..."></textarea> | |
| * </div> | |
| * <button type="submit" class="button">Submit</button> | |
| * </form> | |
| * | |
| * Styleguide 25.5 | |
| */ | |
| /** | |
| * Inline Form | |
| * | |
| * Markup: <form class="form-inline" role="form"> | |
| * <div class="form-group"> | |
| * <label class="sr-only" for="exampleInputEmail2">Email address</label> | |
| * <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> | |
| * </div> | |
| * <div class="form-group"> | |
| * <label class="sr-only" for="exampleInputPassword2">Password</label> | |
| * <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> | |
| * </div> | |
| * <div class="checkbox"> | |
| * <label> | |
| * <input type="checkbox"> Remember me | |
| * </label> | |
| * </div> | |
| * <button type="submit" class="button">Sign in</button> | |
| * </form> | |
| * | |
| * Styleguide 25.5.1 | |
| */ | |
| /** | |
| * Horizontal Form | |
| * | |
| * Markup: <form class="form-horizontal" role="form"> | |
| * <div class="form-group"> | |
| * <label for="inputEmail3" class="col-sm-2 control-label">Email</label> | |
| * <div class="col-sm-10"> | |
| * <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> | |
| * </div> | |
| * </div> | |
| * <div class="form-group"> | |
| * <label for="inputPassword3" class="col-sm-2 control-label">Password</label> | |
| * <div class="col-sm-10"> | |
| * <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> | |
| * </div> | |
| * </div> | |
| * <div class="form-group"> | |
| * <div class="col-sm-offset-2 col-sm-10"> | |
| * <div class="checkbox"> | |
| * <label> | |
| * <input type="checkbox"> Remember me | |
| * </label> | |
| * </div> | |
| * </div> | |
| * </div> | |
| * <div class="form-group"> | |
| * <div class="col-sm-offset-2 col-sm-10"> | |
| * <button type="submit" class="button">Sign in</button> | |
| * </div> | |
| * </div> | |
| * </form> | |
| * | |
| * Styleguide 25.5.2 | |
| */ | |
| /** | |
| * Checks and Radio Buttons | |
| * | |
| * Markup: <div class="checkbox"> | |
| * <label> | |
| * <input type="checkbox" value=""> | |
| * Option one is this and that—be sure to include why it's great | |
| * </label> | |
| * </div> | |
| * <div class="radio"> | |
| * <label> | |
| * <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> | |
| * Option one is this and that—be sure to include why it's great | |
| * </label> | |
| * </div> | |
| * <div class="radio"> | |
| * <label> | |
| * <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> | |
| * Option two can be something else and selecting it will deselect option one | |
| * </label> | |
| * </div> | |
| * | |
| * Styleguide 25.5.2 | |
| */ | |
| /** | |
| * Checks and Radio Buttons Inline | |
| * | |
| * Markup: <label class="checkbox-inline"> | |
| * <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 | |
| * </label> | |
| * <label class="checkbox-inline"> | |
| * <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 | |
| * </label> | |
| * <label class="checkbox-inline"> | |
| * <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 | |
| * </label> | |
| * | |
| * | |
| * Styleguide 25.5.3 | |
| */ | |
| /** | |
| * Selects | |
| * | |
| * <span class="text-danger">We don't support selects as they cannot be styled | |
| * reliably. Please use a button and a dropdown.</span> | |
| * | |
| * Styleguide 25.5.4 | |
| */ | |
| /** | |
| * States and Sizes | |
| * | |
| * Markup: <form role="form"> | |
| * <fieldset disabled> | |
| * <div class="form-group"> | |
| * <label for="disabledTextInput">Disabled input</label> | |
| * <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> | |
| * </div> | |
| * <div class="checkbox"> | |
| * <label> | |
| * <input type="checkbox"> Can't check this | |
| * </label> | |
| * </div> | |
| * <button type="submit" class="button">Submit</button> | |
| * </fieldset> | |
| * <br> | |
| * <div class="form-group has-success"> | |
| * <label class="control-label" for="inputSuccess">Input with success</label> | |
| * <input type="text" class="form-control" id="inputSuccess"> | |
| * </div> | |
| * <div class="form-group has-warning"> | |
| * <label class="control-label" for="inputWarning">Input with warning</label> | |
| * <input type="text" class="form-control" id="inputWarning"> | |
| * </div> | |
| * <div class="form-group has-error"> | |
| * <label class="control-label" for="inputError">Input with error</label> | |
| * <input type="text" class="form-control" id="inputError"> | |
| * </div> | |
| * </form> | |
| * | |
| * Styleguide 25.5.5 | |
| */ | |
| [dir] fieldset { | |
| padding: 0; | |
| margin: 0; | |
| border: 0; } | |
| legend { | |
| display: block; | |
| width: 100%; | |
| font-size: 21px; | |
| line-height: inherit; | |
| color: #b3b3b3; } | |
| [dir] legend { | |
| padding: 0; | |
| margin-bottom: 20px; | |
| border: 0; | |
| border-bottom: 1px solid #614348; } | |
| label { | |
| display: inline-block; } | |
| [dir] label { | |
| margin-bottom: 5px; } | |
| input[type="search"] { | |
| box-sizing: border-box; } | |
| input[type="radio"], | |
| input[type="checkbox"] { | |
| /* IE8-9 */ | |
| line-height: normal; } | |
| [dir] input[type="radio"], [dir] 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: #614348; | |
| vertical-align: middle; } | |
| [dir] output { | |
| padding-top: 4px; } | |
| .form-control { | |
| display: block; | |
| width: 100%; | |
| height: 31px; | |
| font-size: 14px; | |
| line-height: 20px; | |
| color: #614348; | |
| vertical-align: middle; | |
| transition: all 0.1s ease-in-out; } | |
| [dir] .form-control { | |
| padding: 5px 12px 4px; | |
| background-color: #ffffff; | |
| background-image: none; | |
| border: 1px solid #ffffff; | |
| border-radius: 4px; } | |
| [dir] .body-container--windows .form-control, [dir] .body-container--unknown-os .form-control { | |
| border-radius: 0; } | |
| .form-control:focus { | |
| outline: 0; | |
| color: #614348; } | |
| [dir] .form-control:focus { | |
| border-color: #ffffff; | |
| background-color: #ffffff; } | |
| .form-control::-webkit-input-placeholder { | |
| color: #614348; } | |
| [dir] .form-control[disabled], [dir] .form-control[readonly], [dir] fieldset[disabled] .form-control { | |
| cursor: not-allowed; | |
| background-color: #b3b3b3; } | |
| textarea.form-control { | |
| height: auto; } | |
| [dir] .form-group { | |
| margin-bottom: 15px; } | |
| .radio, | |
| .checkbox { | |
| display: block; | |
| min-height: 20px; | |
| vertical-align: middle; } | |
| [dir] .radio, [dir] .checkbox { | |
| margin-top: 10px; | |
| margin-bottom: 10px; } | |
| [dir=ltr] .radio, [dir=ltr] .checkbox { | |
| padding-left: 20px; } | |
| [dir=rtl] .radio, [dir=rtl] .checkbox { | |
| padding-right: 20px; } | |
| .radio label, | |
| .checkbox label { | |
| display: inline; | |
| font-weight: 200; } | |
| [dir] .radio label, [dir] .checkbox label { | |
| margin-bottom: 0; | |
| cursor: pointer; } | |
| [dir=ltr] .radio input[type="radio"], [dir=ltr] .radio-inline input[type="radio"], [dir=ltr] .checkbox input[type="checkbox"], [dir=ltr] .checkbox-inline input[type="checkbox"] { | |
| float: left; | |
| margin-left: -20px; } | |
| [dir=rtl] .radio input[type="radio"], [dir=rtl] .radio-inline input[type="radio"], [dir=rtl] .checkbox input[type="checkbox"], [dir=rtl] .checkbox-inline input[type="checkbox"] { | |
| float: right; | |
| margin-right: -20px; } | |
| [dir] .radio + .radio, [dir] .checkbox + .checkbox { | |
| margin-top: -5px; } | |
| .radio-inline, | |
| .checkbox-inline { | |
| display: inline-block; | |
| vertical-align: middle; | |
| font-weight: 400; } | |
| [dir] .radio-inline, [dir] .checkbox-inline { | |
| margin-bottom: 0; | |
| cursor: pointer; } | |
| [dir=ltr] .radio-inline, [dir=ltr] .checkbox-inline { | |
| padding-left: 20px; } | |
| [dir=rtl] .radio-inline, [dir=rtl] .checkbox-inline { | |
| padding-right: 20px; } | |
| [dir] .radio-inline + .radio-inline, [dir] .checkbox-inline + .checkbox-inline { | |
| margin-top: 0; } | |
| [dir=ltr] .radio-inline + .radio-inline, [dir=ltr] .checkbox-inline + .checkbox-inline { | |
| margin-left: 10px; } | |
| [dir=rtl] .radio-inline + .radio-inline, [dir=rtl] .checkbox-inline + .checkbox-inline { | |
| margin-right: 10px; } | |
| [dir] input[type="radio"][disabled], [dir] fieldset[disabled] input[type="radio"], [dir] input[type="checkbox"][disabled], [dir] fieldset[disabled] | |
| input[type="checkbox"], [dir] .radio[disabled], [dir] fieldset[disabled] | |
| .radio, [dir] .radio-inline[disabled], [dir] fieldset[disabled] | |
| .radio-inline, [dir] .checkbox[disabled], [dir] fieldset[disabled] | |
| .checkbox, [dir] .checkbox-inline[disabled], [dir] fieldset[disabled] | |
| .checkbox-inline { | |
| cursor: not-allowed; } | |
| .has-warning .help-block, | |
| .has-warning .control-label, | |
| .has-warning .radio, | |
| .has-warning .checkbox, | |
| .has-warning .radio-inline, | |
| .has-warning .checkbox-inline { | |
| color: #ffffff; } | |
| [dir] .has-warning .form-control { | |
| border-color: #ffffff; | |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } | |
| [dir] .has-warning .form-control:focus { | |
| border-color: #e6e6e6; | |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px white; } | |
| .has-error .help-block, | |
| .has-error .control-label, | |
| .has-error .radio, | |
| .has-error .checkbox, | |
| .has-error .radio-inline, | |
| .has-error .checkbox-inline { | |
| color: #cd1a2b; } | |
| [dir] .has-error .form-control { | |
| border-color: #cd1a2b; | |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } | |
| [dir] .has-error .form-control:focus { | |
| border-color: #a01422; | |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #eb626f; } | |
| .has-success .help-block, | |
| .has-success .control-label, | |
| .has-success .radio, | |
| .has-success .checkbox, | |
| .has-success .radio-inline, | |
| .has-success .checkbox-inline { | |
| color: #1ed760; } | |
| [dir] .has-success .form-control { | |
| border-color: #1ed760; | |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } | |
| [dir] .has-success .form-control:focus { | |
| border-color: #18aa4c; | |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #70eb9c; } | |
| [dir] .form-control-static { | |
| margin-bottom: 0; } | |
| .help-block { | |
| display: block; | |
| color: #f3f3f3; } | |
| [dir] .help-block { | |
| margin-top: 5px; | |
| margin-bottom: 10px; } | |
| @media (min-width: 592px) { | |
| .form-inline .form-group { | |
| display: inline-block; | |
| vertical-align: middle; } | |
| [dir] .form-inline .form-group { | |
| margin-bottom: 0; } | |
| .form-inline .form-control { | |
| display: inline-block; } | |
| .form-inline .radio, | |
| .form-inline .checkbox { | |
| display: inline-block; } | |
| [dir] .form-inline .radio, [dir] .form-inline .checkbox { | |
| margin-top: 0; | |
| margin-bottom: 0; } | |
| [dir=ltr] .form-inline .radio, [dir=ltr] .form-inline .checkbox { | |
| padding-left: 0; } | |
| [dir=rtl] .form-inline .radio, [dir=rtl] .form-inline .checkbox { | |
| padding-right: 0; } | |
| [dir] .form-inline .radio input[type="radio"], [dir] .form-inline .checkbox input[type="checkbox"] { | |
| float: none; } | |
| [dir=ltr] .form-inline .radio input[type="radio"], [dir=ltr] .form-inline .checkbox input[type="checkbox"] { | |
| margin-left: 0; } | |
| [dir=rtl] .form-inline .radio input[type="radio"], [dir=rtl] .form-inline .checkbox input[type="checkbox"] { | |
| margin-right: 0; } } | |
| [dir] .form-horizontal .control-label, [dir] .form-horizontal .radio, [dir] .form-horizontal .checkbox, [dir] .form-horizontal .radio-inline, [dir] .form-horizontal .checkbox-inline { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| padding-top: 6px; } | |
| [dir=ltr] .form-horizontal .form-group { | |
| margin-left: -8px; | |
| margin-right: -8px; } | |
| [dir=rtl] .form-horizontal .form-group { | |
| margin-right: -8px; | |
| margin-left: -8px; } | |
| .form-horizontal .form-group::after { | |
| content: ""; | |
| display: table; } | |
| [dir] .form-horizontal .form-group::after { | |
| clear: both; } | |
| [dir=ltr] .form-horizontal .form-group .row { | |
| margin-left: -8px; | |
| margin-right: -8px; } | |
| [dir=rtl] .form-horizontal .form-group .row { | |
| margin-right: -8px; | |
| margin-left: -8px; } | |
| @media (min-width: 592px) { | |
| [dir=ltr] .form-horizontal .form-group { | |
| margin-left: -8px; | |
| margin-right: -8px; } | |
| [dir=rtl] .form-horizontal .form-group { | |
| margin-right: -8px; | |
| margin-left: -8px; } | |
| [dir=ltr] .form-horizontal .form-group .row { | |
| margin-left: -8px; | |
| margin-right: -8px; } | |
| [dir=rtl] .form-horizontal .form-group .row { | |
| margin-right: -8px; | |
| margin-left: -8px; } } | |
| @media (min-width: 820px) { | |
| [dir=ltr] .form-horizontal .form-group { | |
| margin-left: -10px; | |
| margin-right: -10px; } | |
| [dir=rtl] .form-horizontal .form-group { | |
| margin-right: -10px; | |
| margin-left: -10px; } | |
| [dir=ltr] .form-horizontal .form-group .row { | |
| margin-left: -10px; | |
| margin-right: -10px; } | |
| [dir=rtl] .form-horizontal .form-group .row { | |
| margin-right: -10px; | |
| margin-left: -10px; } } | |
| @media (min-width: 1280px) { | |
| [dir=ltr] .form-horizontal .form-group { | |
| margin-left: -12px; | |
| margin-right: -12px; } | |
| [dir=rtl] .form-horizontal .form-group { | |
| margin-right: -12px; | |
| margin-left: -12px; } | |
| [dir=ltr] .form-horizontal .form-group .row { | |
| margin-left: -12px; | |
| margin-right: -12px; } | |
| [dir=rtl] .form-horizontal .form-group .row { | |
| margin-right: -12px; | |
| margin-left: -12px; } } | |
| [dir] .form-horizontal .form-control-static { | |
| padding-top: 4px; } | |
| @media (min-width: 592px) { | |
| [dir=ltr] .form-horizontal .control-label { | |
| text-align: right; } | |
| [dir=rtl] .form-horizontal .control-label { | |
| text-align: left; } } | |
| /** | |
| * 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: ""; } | |
| [dir] .caret { | |
| border-top: 4px solid currentcolor; } | |
| [dir=ltr] .caret { | |
| margin-left: 2px; | |
| border-right: 4px solid transparent; | |
| border-left: 4px solid transparent; } | |
| [dir=rtl] .caret { | |
| margin-right: 2px; | |
| border-left: 4px solid transparent; | |
| border-right: 4px solid transparent; } | |
| .dropdown-interior-menu { | |
| list-style: none; } | |
| [dir] .dropdown-interior-menu { | |
| background-color: #614348; | |
| 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: 200; | |
| color: #b3b3b3; | |
| text-transform: none; | |
| color: #b3b3b3; | |
| white-space: nowrap; } | |
| [dir] .dropdown-menu > li > a, [dir] .dropdown-interior-menu > li > a { | |
| padding: 9px 26px; | |
| clear: both; | |
| border-bottom: none; } | |
| [dir=ltr] .dropdown-menu > li > a::before, [dir=ltr] .dropdown-interior-menu > li > a::before { | |
| margin-right: 3px; } | |
| [dir=rtl] .dropdown-menu > li > a::before, [dir=rtl] .dropdown-interior-menu > li > a::before { | |
| margin-left: 3px; } | |
| [dir=ltr] .dropdown-menu > li > a.checked, [dir=ltr] .dropdown-interior-menu > li > a.checked { | |
| padding-left: 6px; } | |
| [dir=rtl] .dropdown-menu > li > a.checked, [dir=rtl] .dropdown-interior-menu > li > a.checked { | |
| padding-right: 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; } | |
| [dir=ltr] .dropdown-menu > li:last-child, [dir=ltr] .dropdown-menu > li:last-child > a, [dir=ltr] .dropdown-interior-menu > li:last-child, [dir=ltr] .dropdown-interior-menu > li:last-child > a { | |
| border-bottom-right-radius: 8px; | |
| border-bottom-left-radius: 8px; } | |
| [dir=rtl] .dropdown-menu > li:last-child, [dir=rtl] .dropdown-menu > li:last-child > a, [dir=rtl] .dropdown-interior-menu > li:last-child, [dir=rtl] .dropdown-interior-menu > li:last-child > a { | |
| border-bottom-left-radius: 8px; | |
| border-bottom-right-radius: 8px; } | |
| [dir] .dropdown-menu > li:first-child, [dir] .dropdown-menu > li:first-child > a, [dir] .dropdown-interior-menu > li:first-child, [dir] .dropdown-interior-menu > li:first-child > a { | |
| box-shadow: none; } | |
| [dir=ltr] .dropdown-menu > li:first-child, [dir=ltr] .dropdown-menu > li:first-child > a, [dir=ltr] .dropdown-interior-menu > li:first-child, [dir=ltr] .dropdown-interior-menu > li:first-child > a { | |
| border-top-right-radius: 8px; | |
| border-top-left-radius: 8px; } | |
| [dir=rtl] .dropdown-menu > li:first-child, [dir=rtl] .dropdown-menu > li:first-child > a, [dir=rtl] .dropdown-interior-menu > li:first-child, [dir=rtl] .dropdown-interior-menu > li:first-child > a { | |
| border-top-left-radius: 8px; | |
| border-top-right-radius: 8px; } | |
| [dir=ltr] .dropdown-menu.icon-menu > li > a::before, [dir=ltr] .dropdown-interior-menu.icon-menu > li > a::before { | |
| margin-left: -8px; } | |
| [dir=rtl] .dropdown-menu.icon-menu > li > a::before, [dir=rtl] .dropdown-interior-menu.icon-menu > li > a::before { | |
| margin-right: -8px; } | |
| .dropdown-menu .divider, | |
| .dropdown-interior-menu .divider { | |
| height: 2px; | |
| overflow: hidden; } | |
| [dir] .dropdown-menu .divider, [dir] .dropdown-interior-menu .divider { | |
| margin: 0; } | |
| .dropdown-menu { | |
| position: absolute; | |
| top: 100%; | |
| z-index: 1000; | |
| display: none; | |
| min-width: 160px; | |
| list-style: none; } | |
| [dir] .dropdown-menu { | |
| padding: 0; | |
| margin: 0; | |
| background-color: #614348; | |
| border: 1px solid rgba(0, 0, 0, 0.15); | |
| border-radius: 8px; | |
| box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.5); | |
| background-clip: padding-box; } | |
| [dir=ltr] .dropdown-menu { | |
| left: 0; | |
| float: left; } | |
| [dir=rtl] .dropdown-menu { | |
| right: 0; | |
| float: right; } | |
| [dir=ltr] .dropdown-menu.pull-right { | |
| right: 0; | |
| left: auto; } | |
| [dir=rtl] .dropdown-menu.pull-right { | |
| left: 0; | |
| right: auto; } | |
| [dir] .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; } | |
| [dir] .dropdown-menu:not(.no-arrow).arrow-top::before { | |
| border: 10px solid transparent; | |
| border-bottom: 10px solid #614348; } | |
| [dir=ltr] .dropdown-menu:not(.no-arrow).arrow-top::before { | |
| left: 50%; | |
| margin-left: -10px; | |
| margin-right: -10px; } | |
| [dir=rtl] .dropdown-menu:not(.no-arrow).arrow-top::before { | |
| right: 50%; | |
| margin-right: -10px; | |
| margin-left: -10px; } | |
| [dir] .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; } | |
| [dir] .dropdown-menu:not(.no-arrow).arrow-bottom::before { | |
| border: 10px solid transparent; | |
| border-top: 10px solid #614348; } | |
| [dir=ltr] .dropdown-menu:not(.no-arrow).arrow-bottom::before { | |
| left: 50%; | |
| margin-left: -10px; | |
| margin-right: -10px; } | |
| [dir=rtl] .dropdown-menu:not(.no-arrow).arrow-bottom::before { | |
| right: 50%; | |
| margin-right: -10px; | |
| margin-left: -10px; } | |
| [dir=ltr] .dropdown-menu:not(.no-arrow).arrow-right { | |
| margin-right: 10px; } | |
| [dir=rtl] .dropdown-menu:not(.no-arrow).arrow-right { | |
| margin-left: 10px; } | |
| .dropdown-menu:not(.no-arrow).arrow-right::before { | |
| position: absolute; | |
| width: 0; | |
| height: 0; | |
| content: ""; | |
| top: 50%; } | |
| [dir] .dropdown-menu:not(.no-arrow).arrow-right::before { | |
| border: 10px solid transparent; | |
| margin-top: -10px; | |
| margin-bottom: -10px; } | |
| [dir=ltr] .dropdown-menu:not(.no-arrow).arrow-right::before { | |
| right: -20px; | |
| border-left: 10px solid #614348; } | |
| [dir=rtl] .dropdown-menu:not(.no-arrow).arrow-right::before { | |
| left: -20px; | |
| border-right: 10px solid #614348; } | |
| [dir=ltr] .dropdown-menu:not(.no-arrow).arrow-left { | |
| margin-left: 10px; } | |
| [dir=rtl] .dropdown-menu:not(.no-arrow).arrow-left { | |
| margin-right: 10px; } | |
| .dropdown-menu:not(.no-arrow).arrow-left::before { | |
| position: absolute; | |
| width: 0; | |
| height: 0; | |
| content: ""; | |
| top: 50%; } | |
| [dir] .dropdown-menu:not(.no-arrow).arrow-left::before { | |
| border: 10px solid transparent; | |
| margin-top: -10px; | |
| margin-bottom: -10px; } | |
| [dir=ltr] .dropdown-menu:not(.no-arrow).arrow-left::before { | |
| left: -20px; | |
| border-right: 10px solid #614348; } | |
| [dir=rtl] .dropdown-menu:not(.no-arrow).arrow-left::before { | |
| right: -20px; | |
| border-left: 10px solid #614348; } | |
| [dir=ltr] .dropdown-menu:not(.no-arrow).arrow-position-left::before { | |
| left: 20px; } | |
| [dir=rtl] .dropdown-menu:not(.no-arrow).arrow-position-left::before { | |
| right: 20px; } | |
| [dir=ltr] .dropdown-menu:not(.no-arrow).arrow-position-right::before { | |
| left: auto; | |
| right: 20px; } | |
| [dir=rtl] .dropdown-menu:not(.no-arrow).arrow-position-right::before { | |
| right: auto; | |
| left: 20px; } | |
| .dropdown-menu:not(.no-arrow).arrow-position-top::before { | |
| top: 20px; } | |
| .dropdown-menu:not(.no-arrow).arrow-position-bottom::before { | |
| top: auto; | |
| bottom: 20px; } | |
| .dropdown-interior-menu > li.selected, | |
| .dropdown-interior-menu > li > a:focus, | |
| .dropdown-menu > li.selected, | |
| .dropdown-menu > li > a:focus, | |
| .dropdown-submenu:focus > a { | |
| color: #cdcdcd; | |
| outline: none; } | |
| [dir] .dropdown-interior-menu > li.selected, [dir] .dropdown-interior-menu > li > a:focus, [dir] .dropdown-menu > li.selected, [dir] .dropdown-menu > li > a:focus, [dir] .dropdown-submenu:focus > a { | |
| background-color: #614348; } | |
| .dropdown-menu > .active > a, | |
| .dropdown-menu > .active.selected, | |
| .dropdown-menu > .active > a:focus, | |
| .dropdown-interior-menu > .active > a, | |
| .dropdown-interior-menu > .active.selected, | |
| .dropdown-interior-menu > .active > a:focus { | |
| color: #1ed760; | |
| text-decoration: none; | |
| outline: 0; } | |
| [dir] .dropdown-menu > .active > a, [dir] .dropdown-menu > .active.selected, [dir] .dropdown-menu > .active > a:focus, [dir] .dropdown-interior-menu > .active > a, [dir] .dropdown-interior-menu > .active.selected, [dir] .dropdown-interior-menu > .active > a:focus { | |
| background-color: #614348; } | |
| .dropdown-menu > .disabled > a, | |
| .dropdown-menu > .disabled > a:focus, | |
| .dropdown-interior-menu > .disabled > a, | |
| .dropdown-interior-menu > .disabled > a:focus { | |
| color: rgba(179, 179, 179, 0.5); } | |
| .dropdown-menu > .disabled > a:focus, | |
| .dropdown-interior-menu > .disabled > a:focus { | |
| text-decoration: none; } | |
| [dir] .dropdown-menu > .disabled > a:focus, [dir] .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; } | |
| [dir=ltr] .dropdown-backdrop { | |
| left: 0; | |
| right: 0; } | |
| [dir=rtl] .dropdown-backdrop { | |
| right: 0; | |
| left: 0; } | |
| [dir=ltr] .pull-right > .dropdown-menu { | |
| right: 0; | |
| left: auto; } | |
| [dir=rtl] .pull-right > .dropdown-menu { | |
| left: 0; | |
| right: auto; } | |
| .dropup .caret, | |
| .navbar-fixed-bottom .dropdown .caret { | |
| content: ""; } | |
| [dir] .dropup .caret, [dir] .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%; } | |
| [dir] .dropup .dropdown-menu, [dir] .navbar-fixed-bottom .dropdown .dropdown-menu { | |
| margin-bottom: 1px; } | |
| .dropdown-submenu { | |
| position: relative; } | |
| .dropdown-submenu > .dropdown-menu { | |
| top: 0; | |
| display: none; } | |
| [dir] .dropdown-submenu > .dropdown-menu { | |
| margin-top: -1px; } | |
| [dir=ltr] .dropdown-submenu > .dropdown-menu { | |
| left: calc(100% - 1px); } | |
| [dir=rtl] .dropdown-submenu > .dropdown-menu { | |
| right: calc(100% - 1px); } | |
| .dropdown-submenu > .dropdown-menu.open { | |
| display: inline; } | |
| [dir=ltr] .dropdown-submenu.left > .dropdown-menu { | |
| left: auto; | |
| right: calc(100% - 1px); } | |
| [dir=rtl] .dropdown-submenu.left > .dropdown-menu { | |
| right: auto; | |
| left: calc(100% - 1px); } | |
| .dropup .dropdown-submenu > .dropdown-menu { | |
| top: auto; | |
| bottom: 0; } | |
| [dir] .dropup .dropdown-submenu > .dropdown-menu { | |
| margin-top: 0; | |
| margin-bottom: -2px; } | |
| [dir=ltr] .dropup .dropdown-submenu > .dropdown-menu { | |
| border-bottom-left-radius: 0; } | |
| [dir=rtl] .dropup .dropdown-submenu > .dropdown-menu { | |
| border-bottom-right-radius: 0; } | |
| .dropdown-submenu > a::after { | |
| display: block; | |
| content: " "; | |
| width: 0; | |
| height: 0; } | |
| [dir] .dropdown-submenu > a::after { | |
| border-color: transparent; | |
| border-style: solid; | |
| margin-top: 4px; } | |
| [dir=ltr] .dropdown-submenu > a::after { | |
| float: right; | |
| border-width: 5px 0 5px 5px; | |
| border-left-color: #b3b3b3; | |
| margin-right: -7px; } | |
| [dir=rtl] .dropdown-submenu > a::after { | |
| float: left; | |
| border-width: 5px 5px 5px 0; | |
| border-right-color: #b3b3b3; | |
| margin-left: -7px; } | |
| [dir=ltr] .dropdown-submenu:hover > a::after { | |
| border-left-color: #cdcdcd; } | |
| [dir=rtl] .dropdown-submenu:hover > a::after { | |
| border-right-color: #cdcdcd; } | |
| [dir] .dropdown-submenu.pull-left { | |
| float: none; } | |
| [dir=ltr] .dropdown-submenu.pull-left > .dropdown-menu { | |
| left: -100%; | |
| margin-left: 10px; | |
| border-top-right-radius: 0; } | |
| [dir=rtl] .dropdown-submenu.pull-left > .dropdown-menu { | |
| right: -100%; | |
| margin-right: 10px; | |
| border-top-left-radius: 0; } | |
| [dir=ltr] .dropdown .dropdown-menu .nav-header { | |
| padding-left: 20px; | |
| padding-right: 20px; } | |
| [dir=rtl] .dropdown .dropdown-menu .nav-header { | |
| padding-right: 20px; | |
| padding-left: 20px; } | |
| .typeahead { | |
| z-index: 1051; } | |
| [dir] .body-container--windows .dropdown-menu, [dir] .body-container--unknown-os .dropdown-menu { | |
| border-radius: 0; } | |
| [dir=ltr] .body-container--windows .dropdown-menu > li:last-child, [dir=ltr] .body-container--windows .dropdown-menu > li:last-child > a, [dir=ltr] .body-container--windows .dropdown-interior-menu > li:last-child, [dir=ltr] .body-container--windows .dropdown-interior-menu > li:last-child > a, [dir=ltr] .body-container--unknown-os .dropdown-menu > li:last-child, [dir=ltr] .body-container--unknown-os .dropdown-menu > li:last-child > a, [dir=ltr] .body-container--unknown-os .dropdown-interior-menu > li:last-child, [dir=ltr] .body-container--unknown-os .dropdown-interior-menu > li:last-child > a { | |
| border-bottom-right-radius: 0; | |
| border-bottom-left-radius: 0; } | |
| [dir=rtl] .body-container--windows .dropdown-menu > li:last-child, [dir=rtl] .body-container--windows .dropdown-menu > li:last-child > a, [dir=rtl] .body-container--windows .dropdown-interior-menu > li:last-child, [dir=rtl] .body-container--windows .dropdown-interior-menu > li:last-child > a, [dir=rtl] .body-container--unknown-os .dropdown-menu > li:last-child, [dir=rtl] .body-container--unknown-os .dropdown-menu > li:last-child > a, [dir=rtl] .body-container--unknown-os .dropdown-interior-menu > li:last-child, [dir=rtl] .body-container--unknown-os .dropdown-interior-menu > li:last-child > a { | |
| border-bottom-left-radius: 0; | |
| border-bottom-right-radius: 0; } | |
| [dir=ltr] .body-container--windows .dropdown-menu > li:first-child, [dir=ltr] .body-container--windows .dropdown-menu > li:first-child > a, [dir=ltr] .body-container--windows .dropdown-interior-menu > li:first-child, [dir=ltr] .body-container--windows .dropdown-interior-menu > li:first-child > a, [dir=ltr] .body-container--unknown-os .dropdown-menu > li:first-child, [dir=ltr] .body-container--unknown-os .dropdown-menu > li:first-child > a, [dir=ltr] .body-container--unknown-os .dropdown-interior-menu > li:first-child, [dir=ltr] .body-container--unknown-os .dropdown-interior-menu > li:first-child > a { | |
| border-top-right-radius: 0; | |
| border-top-left-radius: 0; } | |
| [dir=rtl] .body-container--windows .dropdown-menu > li:first-child, [dir=rtl] .body-container--windows .dropdown-menu > li:first-child > a, [dir=rtl] .body-container--windows .dropdown-interior-menu > li:first-child, [dir=rtl] .body-container--windows .dropdown-interior-menu > li:first-child > a, [dir=rtl] .body-container--unknown-os .dropdown-menu > li:first-child, [dir=rtl] .body-container--unknown-os .dropdown-menu > li:first-child > a, [dir=rtl] .body-container--unknown-os .dropdown-interior-menu > li:first-child, [dir=rtl] .body-container--unknown-os .dropdown-interior-menu > li:first-child > a { | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; } | |
| /** | |
| * Dividers | |
| * | |
| * Small divider with or without title. In use on album page between regular tracks and additional tracks. | |
| * | |
| * Styleguide 30.1 | |
| */ | |
| /** | |
| * Horizontal rules | |
| * | |
| * Markup: <hr> | |
| * | |
| * Styleguide 30.1.1 | |
| */ | |
| [dir] hr { | |
| margin: 5px 0; | |
| border: 0; | |
| border-top: 1px solid #614348; } | |
| /** | |
| * Default divider | |
| * | |
| * Markup: <div class="divider"><span class="divider-title">Some Title</span></div> | |
| * | |
| * Styleguide 30.1.2 | |
| */ | |
| .divider { | |
| width: 100%; | |
| line-height: 1px; } | |
| [dir] .divider { | |
| text-align: center; | |
| border-bottom: 1px solid #614348; | |
| margin: 12px 0; } | |
| .divider .divider-title { | |
| font-size: 11px; | |
| line-height: 16px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; | |
| color: #a0a0a0; } | |
| [dir] .divider .divider-title { | |
| background-color: #614348; | |
| padding: 0 6px; } | |
| /** | |
| * Section divider | |
| * | |
| * Markup: | |
| * <div class="section-divider"> | |
| * <div>Some cool section</div> | |
| * <a class="section-auxiliary">Some Action</a> | |
| * </div> | |
| * <div class="section-divider section-divider-borderless"> | |
| * <div>Some cool section</div> | |
| * </div> | |
| * <div class="section-divider"> | |
| * <h2>Normailizes header sizes</h2> | |
| * <div class="section-auxiliary"> | |
| * <div class="button-group"> | |
| * <a class="button button-icon-with-stroke spoticon-list-view-16" href="#" data-view-mode="lists"></a> | |
| * <a class="button button-icon-with-stroke spoticon-grid-view-16" href="#" data-view-mode="covers"></a> | |
| * </div> | |
| * </div> | |
| * </div> | |
| * <div class="section-divider"> | |
| * <a>Works with links</a> | |
| * <a class="section-auxiliary">Some Action</a> | |
| * </div> | |
| * | |
| * Styleguide 30.1.3 | |
| */ | |
| .section-divider { | |
| position: relative; | |
| color: #ffffff; } | |
| [dir] .section-divider { | |
| border-bottom: 1px solid #614348; | |
| margin: 0 0 16px; | |
| padding: 26px 0 4px; } | |
| .section-divider::after { | |
| content: ""; | |
| display: table; } | |
| [dir] .section-divider::after { | |
| clear: both; } | |
| .section-divider > * { | |
| font-size: 18px; | |
| line-height: 24px; | |
| letter-spacing: -0.005em; | |
| font-weight: 600; | |
| color: #ffffff; | |
| text-transform: none; } | |
| [dir] .section-divider > * { | |
| margin: 0; } | |
| [dir=ltr] .section-divider > *:first-child { | |
| float: left; } | |
| [dir=rtl] .section-divider > *:first-child { | |
| float: right; } | |
| [dir] .section-divider.section-divider-borderless { | |
| border-bottom: 0; | |
| margin-bottom: 8px; | |
| padding-bottom: 0; } | |
| .section-divider .section-auxiliary { | |
| white-space: nowrap; } | |
| [dir=ltr] .section-divider .section-auxiliary { | |
| float: right; } | |
| [dir=rtl] .section-divider .section-auxiliary { | |
| float: left; } | |
| .section-divider .section-auxiliary a { | |
| color: #b3b3b3; | |
| font-size: 11px; | |
| line-height: 16px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; } | |
| .section-divider .section-auxiliary a:hover { | |
| color: #ffffff; } | |
| [dir] .section-divider-small { | |
| border-bottom: 0; | |
| margin-bottom: 8px; | |
| padding-bottom: 0; } | |
| .section-divider-small > * { | |
| font-size: 14px; | |
| line-height: 20px; | |
| letter-spacing: 0.015em; | |
| font-weight: 400; | |
| color: #ffffff; | |
| text-transform: none; } | |
| [dir] .section-divider-small > * { | |
| margin: 0; } | |
| /** | |
| * Tables | |
| * | |
| * For basic styling—light padding and only horizontal dividers—add the base class | |
| * <code>.table</code> to any <code><table></code>. It may seem super redundant, | |
| * but given the widespread use of tables for other plugins like calendars and date | |
| * pickers, we've opted to isolate our custom table styles. | |
| * | |
| * Template: tables | |
| * | |
| * Styleguide 30.6 | |
| */ | |
| table { | |
| max-width: 100%; } | |
| th { | |
| font-weight: 400; } | |
| [dir=ltr] th { | |
| text-align: left; } | |
| [dir=rtl] th { | |
| text-align: right; } | |
| .table { | |
| width: 100%; } | |
| .table th, | |
| .table td { | |
| position: relative; | |
| line-height: 20px; | |
| vertical-align: top; } | |
| [dir] .table th, [dir] .table td { | |
| padding: 8px; | |
| border-top: 1px solid #614348; } | |
| [dir] .table tbody > tr:last-child > td { | |
| border-bottom: 1px solid #614348; } | |
| [dir] .table thead th { | |
| border-top: 0; } | |
| .table thead th { | |
| vertical-align: bottom; } | |
| /** | |
| * List Groups | |
| * | |
| * Toggleable, contextual menu for displaying lists of links. Arrow can be added if needed. | |
| * | |
| * Styleguide 30.3 | |
| */ | |
| /** | |
| * Basic Example with a Badge | |
| * | |
| * Template: list-groups | |
| * | |
| * Styleguide 30.3.1 | |
| */ | |
| /** | |
| * 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; } | |
| [dir] .list-group { | |
| margin-bottom: 20px; } | |
| [dir=ltr] .list-group { | |
| padding-left: 0; } | |
| [dir=rtl] .list-group { | |
| padding-right: 0; } | |
| .list-group-item { | |
| position: relative; | |
| display: block; } | |
| [dir] .list-group-item { | |
| padding: 10px; | |
| border-bottom: 1px solid #614348; | |
| border-top: 1px solid #614348; | |
| margin-top: -1px; } | |
| .list-group-item-heading, | |
| .list-group-item-text { | |
| display: block; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| [dir] .list-group-item-heading { | |
| margin-top: 0; | |
| margin-bottom: 5px; } | |
| .list-group-item-text { | |
| line-height: 1.3; } | |
| [dir] .list-group-item-text { | |
| margin-bottom: 0; } | |
| a.list-group-item { | |
| outline: 0; } | |
| [dir] a.list-group-item { | |
| cursor: default; } | |
| a.list-group-item .list-group-item-heading { | |
| color: #ffffff; } | |
| a.list-group-item .list-group-item-text { | |
| color: #b3b3b3; } | |
| a.list-group-item:hover, | |
| a.list-group-item:focus { | |
| text-decoration: none; } | |
| [dir] a.list-group-item:hover, [dir] a.list-group-item:focus { | |
| background-color: inherit; } | |
| a.list-group-item.active { | |
| z-index: 2; | |
| color: #ffffff; } | |
| [dir] a.list-group-item.active { | |
| background-color: #1db954; | |
| border-color: #1db954; } | |
| a.list-group-item.active .list-group-item-heading { | |
| color: inherit; } | |
| a.list-group-item.active .list-group-item-text { | |
| color: inherit; } | |
| /** | |
| * Media List Items | |
| * | |
| * This is the structure for list items (like in playlists, messages, and search popup.) | |
| * | |
| * Modifiers: | |
| * | |
| * - `.active` - gives a green active indicator. | |
| * - `.large` - gives more padding and more options. | |
| * - `.playable` - **only for `.large` items** - gives a play button on hover for the element. | |
| * - `.playing` - **only for `.large.playable` items** -- Shows the pause button. | |
| * | |
| * Auto-Modifiers: | |
| * | |
| * Some modifiers get added by the template based on the data that gets passed in. | |
| * | |
| * - `.multiline` - adjusts cell for two lines - added upon `subtitle` detection. | |
| * - `.auxiliary` - adds right aligned info section - added upon `auxiliary` 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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir=ltr] .list-group-item.list-group-item-media > a { | |
| left: 0; | |
| right: 0; } | |
| [dir=rtl] .list-group-item.list-group-item-media > a { | |
| right: 0; | |
| left: 0; } | |
| [dir] .list-group-item.list-group-item-media > a:hover, [dir] .list-group-item.list-group-item-media > a:active, [dir] .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; } | |
| [dir] .list-group-item.list-group-item-media .card { | |
| padding-bottom: 0; } | |
| [dir=ltr] .list-group-item.list-group-item-media .card { | |
| left: 0; } | |
| [dir=rtl] .list-group-item.list-group-item-media .card { | |
| right: 0; } | |
| [dir] .list-group-item.list-group-item-media .card-type-artist, [dir] .list-group-item.list-group-item-media .card-type-user { | |
| padding: 5px; } | |
| [dir] .list-group-item.list-group-item-media.active { | |
| background-color: #614348; | |
| border-color: transparent; } | |
| .list-group-item.list-group-item-media.active::before { | |
| content: ""; | |
| height: 100%; | |
| position: absolute; | |
| width: 2px; | |
| z-index: 100; } | |
| [dir] .list-group-item.list-group-item-media.active::before { | |
| background: #1db954; } | |
| [dir=ltr] .list-group-item.list-group-item-media.active::before { | |
| right: 0; } | |
| [dir=rtl] .list-group-item.list-group-item-media.active::before { | |
| left: 0; } | |
| .list-group-item.list-group-item-media.unread::before { | |
| content: ""; | |
| height: 100%; | |
| position: absolute; | |
| width: 2px; | |
| z-index: 100; } | |
| [dir] .list-group-item.list-group-item-media.unread::before { | |
| background: #4687d6; } | |
| [dir=ltr] .list-group-item.list-group-item-media.unread::before { | |
| right: 0; } | |
| [dir=rtl] .list-group-item.list-group-item-media.unread::before { | |
| left: 0; } | |
| [dir] .list-group-item.list-group-item-media:hover, [dir] .list-group-item.list-group-item-media:active { | |
| background-color: #614348; } | |
| .list-group-item.list-group-item-media.multiline .item-data { | |
| line-height: 1.5; } | |
| [dir] .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; } | |
| [dir=ltr] .list-group-item.list-group-item-media .item-data { | |
| padding: 0 10px 0 60px; } | |
| [dir=rtl] .list-group-item.list-group-item-media .item-data { | |
| padding: 0 60px 0 10px; } | |
| .list-group-item.list-group-item-media.more { | |
| height: 38px; | |
| line-height: 36px; } | |
| [dir=ltr] .list-group-item.list-group-item-media.more { | |
| padding-left: 10px; } | |
| [dir=rtl] .list-group-item.list-group-item-media.more { | |
| padding-right: 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; } | |
| [dir=ltr] .list-group-item.list-group-item-media.more::before { | |
| right: 5px; } | |
| [dir=rtl] .list-group-item.list-group-item-media.more::before { | |
| left: 5px; } | |
| [dir] .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; } | |
| [dir=ltr] .list-group-item.list-group-item-media.large .card { | |
| left: 10px; } | |
| [dir=rtl] .list-group-item.list-group-item-media.large .card { | |
| right: 10px; } | |
| [dir] .list-group-item.list-group-item-media.large .card-type-artist, [dir] .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; } | |
| [dir=ltr] .list-group-item.list-group-item-media.large .item-data { | |
| padding-left: 70px; } | |
| [dir=rtl] .list-group-item.list-group-item-media.large .item-data { | |
| padding-right: 70px; } | |
| .list-group-item.list-group-item-media.large.multiline .item-data { | |
| line-height: 24px; } | |
| [dir] .list-group-item.list-group-item-media.large.multiline .item-data { | |
| padding-top: 12px; } | |
| [dir=ltr] .list-group-item.list-group-item-media.large.auxiliary .item-data { | |
| padding-right: 100px; } | |
| [dir=rtl] .list-group-item.list-group-item-media.large.auxiliary .item-data { | |
| padding-left: 100px; } | |
| .list-group-item.list-group-item-media.large.auxiliary .text-meta { | |
| font-size: 11px; } | |
| .list-group-item.list-group-item-media.large.auxiliary .auxiliary-box { | |
| position: absolute; | |
| top: 9px; | |
| bottom: 0; | |
| width: 80px; | |
| max-width: 80px; } | |
| [dir=ltr] .list-group-item.list-group-item-media.large.auxiliary .auxiliary-box { | |
| right: 10px; | |
| text-align: right; } | |
| [dir=rtl] .list-group-item.list-group-item-media.large.auxiliary .auxiliary-box { | |
| left: 10px; | |
| text-align: left; } | |
| .list-group-item.list-group-item-media.large.auxiliary .auxiliary-icon { | |
| line-height: 1.5; | |
| color: #a0a0a0; } | |
| .list-group-item.list-group-item-media .list-group-item-media-play { | |
| position: absolute; | |
| top: 12px; | |
| visibility: hidden; } | |
| [dir=ltr] .list-group-item.list-group-item-media .list-group-item-media-play { | |
| left: 12px; } | |
| [dir=rtl] .list-group-item.list-group-item-media .list-group-item-media-play { | |
| right: 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; } | |
| [dir] .list-group-item.list-group-item-media.playable.large.playing .list-group-item-media-play { | |
| border-color: #ffffff; } | |
| .list-group-item.list-group-item-media.playable.large.playing .list-group-item-media-play::before { | |
| content: "\f131"; } | |
| .list-group-item.list-group-item-media.playable.large.playing .card { | |
| visibility: hidden; } | |
| [dir=ltr] .list-group-item > .badge, [dir=ltr] .list-group-item > .glyphicon-chevron-right { | |
| float: right; } | |
| [dir=rtl] .list-group-item > .badge, [dir=rtl] .list-group-item > .glyphicon-chevron-right { | |
| float: left; } | |
| [dir=ltr] .list-group-item > .glyphicon + .badge { | |
| margin-right: 5px; } | |
| [dir=rtl] .list-group-item > .glyphicon + .badge { | |
| margin-left: 5px; } | |
| /** | |
| * 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 | |
| */ | |
| [dir=ltr] .list-group-item.list-group-item-social { | |
| padding-left: 0; | |
| padding-right: 0; } | |
| [dir=rtl] .list-group-item.list-group-item-social { | |
| padding-right: 0; | |
| padding-left: 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; } | |
| [dir=ltr] .list-group-item.list-group-item-social td:nth-child(2) > div > div { | |
| left: 10px; | |
| right: 0; } | |
| [dir=rtl] .list-group-item.list-group-item-social td:nth-child(2) > div > div { | |
| right: 10px; | |
| left: 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 td:nth-child(3) { | |
| width: 0; } | |
| .list-group-item.list-group-item-social .remove { | |
| display: none; | |
| position: absolute; | |
| top: 10px; } | |
| [dir=ltr] .list-group-item.list-group-item-social .remove { | |
| right: 0; } | |
| [dir=rtl] .list-group-item.list-group-item-social .remove { | |
| left: 0; } | |
| .list-group-item.list-group-item-social:hover .remove { | |
| display: inline; } | |
| [dir] .list-group-item.list-group-item-social .pull-bottom { | |
| margin-top: 16px; } | |
| /** | |
| * Share Items (No Background) | |
| * | |
| * These are used in notifications and in the discover cards. They have optional | |
| * meta and quote fields. | |
| * | |
| * Template: share-items | |
| * Data: demo-shares | |
| * | |
| * Styleguide 30.5 | |
| */ | |
| /** | |
| * Share Items (In list group) | |
| * | |
| * They can also have the `list-group-item` class | |
| * (like in the notification popup). | |
| * | |
| * Template: share-items-list-group | |
| * Data: demo-shares | |
| * CodeDisplay: none | |
| * | |
| * Styleguide 30.5.1 | |
| */ | |
| .share-object::after { | |
| content: ""; | |
| display: table; } | |
| [dir] .share-object::after { | |
| clear: both; } | |
| [dir=ltr] .share-object .share-data, [dir=ltr] .share-object .share-meta { | |
| margin-left: 68px; } | |
| [dir=rtl] .share-object .share-data, [dir=rtl] .share-object .share-meta { | |
| margin-right: 68px; } | |
| .share-object .share-meta { | |
| font-size: 11px; | |
| line-height: 16px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; } | |
| [dir] .share-object .share-quote { | |
| margin-top: 16px; } | |
| .share-object .share-quote::after { | |
| content: ""; | |
| display: table; } | |
| [dir] .share-object .share-quote::after { | |
| clear: both; } | |
| .share-object.list-group-item { | |
| transition: background 0.1s ease; } | |
| [dir] .share-object.list-group-item { | |
| border: 0; | |
| border-bottom: 1px solid transparent; | |
| margin-top: 0; | |
| padding: 12px; | |
| background-color: #614348; | |
| background-clip: padding-box; | |
| cursor: pointer; } | |
| [dir] .share-object.list-group-item:hover { | |
| background-color: #614348; } | |
| [dir] .share-object.list-group-item:active { | |
| background-color: #614348; } | |
| .share-object.list-group-item.unread::before { | |
| display: block; | |
| content: ""; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| width: 2px; | |
| z-index: 100; } | |
| [dir] .share-object.list-group-item.unread::before { | |
| background: #4687d6; } | |
| [dir=ltr] .share-object.list-group-item.unread::before { | |
| right: 0; } | |
| [dir=rtl] .share-object.list-group-item.unread::before { | |
| left: 0; } | |
| /** | |
| * 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; } | |
| [dir=ltr] .crsl-inner { | |
| left: 0%; | |
| transition: left 0.5s ease-in-out; } | |
| [dir=rtl] .crsl-inner { | |
| right: 0%; | |
| transition: right 0.5s ease-in-out; } | |
| .crsl-inner.crsl-inner-drag { | |
| transition: 0s; } | |
| [dir=ltr] .crsl-inner.crsl-inner-swipe { | |
| transition: left 0.3s ease-out; } | |
| [dir=rtl] .crsl-inner.crsl-inner-swipe { | |
| transition: right 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; } | |
| [dir] .crsl-inner .crsl-item.col-xs-1, [dir] .crsl-inner .crsl-item.col-xs-2, [dir] .crsl-inner .crsl-item.col-xs-3, [dir] .crsl-inner .crsl-item.col-xs-4, [dir] .crsl-inner .crsl-item.col-xs-5, [dir] .crsl-inner .crsl-item.col-xs-6, [dir] .crsl-inner .crsl-item.col-xs-7, [dir] .crsl-inner .crsl-item.col-xs-8, [dir] .crsl-inner .crsl-item.col-xs-9, [dir] .crsl-inner .crsl-item.col-xs-10, [dir] .crsl-inner .crsl-item.col-xs-11, [dir] .crsl-inner .crsl-item.col-xs-12, [dir] .crsl-inner .crsl-item.col-sm-1, [dir] .crsl-inner .crsl-item.col-sm-2, [dir] .crsl-inner .crsl-item.col-sm-3, [dir] .crsl-inner .crsl-item.col-sm-4, [dir] .crsl-inner .crsl-item.col-sm-5, [dir] .crsl-inner .crsl-item.col-sm-6, [dir] .crsl-inner .crsl-item.col-sm-7, [dir] .crsl-inner .crsl-item.col-sm-8, [dir] .crsl-inner .crsl-item.col-sm-9, [dir] .crsl-inner .crsl-item.col-sm-10, [dir] .crsl-inner .crsl-item.col-sm-11, [dir] .crsl-inner .crsl-item.col-sm-12, [dir] .crsl-inner .crsl-item.col-md-1, [dir] .crsl-inner .crsl-item.col-md-2, [dir] .crsl-inner .crsl-item.col-md-3, [dir] .crsl-inner .crsl-item.col-md-4, [dir] .crsl-inner .crsl-item.col-md-5, [dir] .crsl-inner .crsl-item.col-md-6, [dir] .crsl-inner .crsl-item.col-md-7, [dir] .crsl-inner .crsl-item.col-md-8, [dir] .crsl-inner .crsl-item.col-md-9, [dir] .crsl-inner .crsl-item.col-md-10, [dir] .crsl-inner .crsl-item.col-md-11, [dir] .crsl-inner .crsl-item.col-md-12, [dir] .crsl-inner .crsl-item.col-lg-1, [dir] .crsl-inner .crsl-item.col-lg-2, [dir] .crsl-inner .crsl-item.col-lg-3, [dir] .crsl-inner .crsl-item.col-lg-4, [dir] .crsl-inner .crsl-item.col-lg-5, [dir] .crsl-inner .crsl-item.col-lg-6, [dir] .crsl-inner .crsl-item.col-lg-7, [dir] .crsl-inner .crsl-item.col-lg-8, [dir] .crsl-inner .crsl-item.col-lg-9, [dir] .crsl-inner .crsl-item.col-lg-10, [dir] .crsl-inner .crsl-item.col-lg-11, [dir] .crsl-inner .crsl-item.col-lg-12 { | |
| float: none; } | |
| /** | |
| * 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; } | |
| [dir] .nav { | |
| margin-bottom: 0; | |
| border-bottom: 1px solid #614348; } | |
| [dir=ltr] .nav { | |
| margin-left: 0; | |
| padding-left: 0; } | |
| [dir=rtl] .nav { | |
| margin-right: 0; | |
| padding-right: 0; } | |
| .nav.nav-justified { | |
| width: 100%; } | |
| .nav.nav-justified > li { | |
| display: table-cell; | |
| width: 1%; } | |
| [dir] .nav.nav-justified > li { | |
| float: none; } | |
| [dir] .nav.nav-justified > li > a { | |
| text-align: center; } | |
| .nav::after { | |
| content: ""; | |
| display: table; } | |
| [dir] .nav::after { | |
| clear: both; } | |
| .nav > li { | |
| position: relative; | |
| display: block; } | |
| [dir] .nav > li { | |
| margin: 0 15px; } | |
| [dir=ltr] .nav > li { | |
| float: left; } | |
| [dir=rtl] .nav > li { | |
| float: right; } | |
| [dir=ltr] .nav > li:first-child, [dir=ltr] .nav > li:first-child .navbar-text { | |
| margin-left: 0; } | |
| [dir=rtl] .nav > li:first-child, [dir=rtl] .nav > li:first-child .navbar-text { | |
| margin-right: 0; } | |
| [dir=ltr] .nav > li:last-child { | |
| margin-right: 0; } | |
| [dir=rtl] .nav > li:last-child { | |
| margin-left: 0; } | |
| .nav > li > a { | |
| position: relative; | |
| display: block; | |
| line-height: 44px; | |
| color: #b3b3b3; | |
| overflow: hidden; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; | |
| font-size: 14px; | |
| transition: color 0.2s; } | |
| [dir] .nav > li > a { | |
| border-bottom: none; } | |
| .nav > li > a:hover, .nav > li > a:focus { | |
| color: #ffffff; } | |
| [dir] .nav > li > a:hover, [dir] .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; } | |
| [dir] .nav > li > a::after { | |
| background-color: transparent; } | |
| [dir=ltr] .nav > li > a::after { | |
| left: 50%; | |
| transform: translateX(-50%); } | |
| [dir=rtl] .nav > li > a::after { | |
| right: 50%; | |
| transform: translateX(50%); } | |
| .nav > li > p { | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; | |
| font-size: 14px; } | |
| .nav > li.active > a { | |
| color: #ffffff; } | |
| [dir] .nav > li.active > a::after { | |
| background-color: #1db954; } | |
| .nav > li.disabled > a { | |
| color: #b3b3b3; } | |
| .nav > li.disabled > a:hover, | |
| .nav > li.disabled > a:focus { | |
| color: #b3b3b3; | |
| text-decoration: none; } | |
| [dir] .nav > li.disabled > a:hover, [dir] .nav > li.disabled > a:focus { | |
| background-color: transparent; | |
| cursor: default; } | |
| [dir] .nav > li + .nav-header { | |
| margin-top: 9px; } | |
| .nav.open > a, | |
| .nav.open > a:hover, | |
| .nav.open > a:focus { | |
| color: #fff; } | |
| [dir] .nav.open > a, [dir] .nav.open > a:hover, [dir] .nav.open > a:focus { | |
| background-color: #ffffff; | |
| border-color: #ffffff; } | |
| [dir] .nav.open > a .caret, [dir] .nav.open > a:hover .caret, [dir] .nav.open > a:focus .caret { | |
| border-top-color: #fff; | |
| border-bottom-color: #fff; } | |
| [dir=ltr] .nav > .pull-right { | |
| float: right; } | |
| [dir=rtl] .nav > .pull-right { | |
| float: left; } | |
| .nav .nav-divider { | |
| height: 2px; | |
| overflow: hidden; } | |
| [dir] .nav .nav-divider { | |
| margin: 9px 0; | |
| background-color: #e5e5e5; | |
| border-bottom: 1px solid #ffffff; } | |
| .nav-justified { | |
| width: 100%; } | |
| .nav-justified > li { | |
| display: table-cell; | |
| width: 1%; } | |
| [dir] .nav-justified > li { | |
| float: none; } | |
| [dir] .nav-justified > li > a { | |
| text-align: center; } | |
| .nav-header { | |
| display: block; | |
| font-size: 12px; | |
| line-height: 20px; | |
| color: #b3b3b3; | |
| text-transform: uppercase; } | |
| [dir] .nav-header { | |
| padding: 3px 15px; | |
| text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } | |
| .tabbable::after { | |
| content: ""; | |
| display: table; } | |
| [dir] .tabbable::after { | |
| clear: both; } | |
| .tab-content > .tab-pane, | |
| .pill-content > .pill-pane { | |
| display: none; } | |
| .tab-content > .active, | |
| .pill-content > .active { | |
| display: block; } | |
| [dir] .nav .caret { | |
| border-top-color: #b3b3b3; | |
| border-bottom-color: #b3b3b3; } | |
| [dir] .nav .active .caret { | |
| border-top-color: #ffffff; | |
| border-bottom-color: #ffffff; } | |
| [dir] .nav a:hover .caret { | |
| border-top-color: #ffffff; | |
| border-bottom-color: #ffffff; } | |
| [dir] .nav-tabs .dropdown-menu { | |
| margin-top: -1px; } | |
| [dir=ltr] .nav-tabs .dropdown-menu { | |
| border-top-right-radius: 0; | |
| border-top-left-radius: 0; } | |
| [dir=rtl] .nav-tabs .dropdown-menu { | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; } | |
| /** | |
| * 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; } | |
| [dir] .navbar::after { | |
| clear: both; } | |
| .navbar.sticky-top { | |
| z-index: 1020; } | |
| [dir] .navbar.sticky-top { | |
| background: #614348; | |
| border-bottom: 1px solid #614348; } | |
| .navbar-fixed-wrapper { | |
| height: 44px; } | |
| [dir] .navbar-nav { | |
| border-bottom: 0; | |
| margin: 0; } | |
| .navbar-nav > li > a { | |
| font-size: 12px; | |
| line-height: 16px; | |
| letter-spacing: 0.015em; | |
| font-weight: 400; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; } | |
| .navbar-nav:not(.no-overflow-menu) { | |
| visibility: hidden; } | |
| [dir=ltr] .navbar-nav:not(.no-overflow-menu) li.last-visible { | |
| margin-right: 0; } | |
| [dir=rtl] .navbar-nav:not(.no-overflow-menu) li.last-visible { | |
| margin-left: 0; } | |
| @media (max-width: 591px) { | |
| .navbar-nav .open .dropdown-menu { | |
| position: static; | |
| width: auto; } | |
| [dir] .navbar-nav .open .dropdown-menu { | |
| float: none; | |
| margin-top: 0; | |
| background-color: transparent; | |
| border: 0; | |
| box-shadow: none; } | |
| [dir=ltr] .navbar-nav .open .dropdown-menu > li > a, [dir=ltr] .navbar-nav .open .dropdown-menu .dropdown-header { | |
| padding: 5px 15px 5px 25px; } | |
| [dir=rtl] .navbar-nav .open .dropdown-menu > li > a, [dir=rtl] .navbar-nav .open .dropdown-menu .dropdown-header { | |
| padding: 5px 25px 5px 15px; } | |
| .navbar-nav .open .dropdown-menu > li > a { | |
| line-height: 20px; } | |
| [dir] .navbar-nav .open .dropdown-menu > li > a:hover, [dir] .navbar-nav .open .dropdown-menu > li > a:focus { | |
| background-image: none; } } | |
| [dir=ltr] .navbar-nav > li { | |
| float: left; } | |
| [dir=rtl] .navbar-nav > li { | |
| float: right; } | |
| [dir=ltr] .navbar-nav > li.navbar-right { | |
| float: right; } | |
| [dir=rtl] .navbar-nav > li.navbar-right { | |
| float: left; } | |
| .navbar-nav > li > a { | |
| line-height: 44px; } | |
| .navbar.large { | |
| min-height: 60px; } | |
| .navbar.large .navbar-nav > li > a { | |
| line-height: 60px; } | |
| [dir=ltr] .navbar-left { | |
| float: left; } | |
| [dir=rtl] .navbar-left { | |
| float: right; } | |
| [dir=ltr] .navbar-right { | |
| float: right; } | |
| [dir=rtl] .navbar-right { | |
| float: left; } | |
| [dir] .navbar-nav > li > .dropdown-menu { | |
| margin-top: 0; } | |
| [dir=ltr] .navbar-nav > li > .dropdown-menu { | |
| border-top-right-radius: 0; | |
| border-top-left-radius: 0; } | |
| [dir=rtl] .navbar-nav > li > .dropdown-menu { | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; } | |
| [dir=ltr] .navbar.sticky-bottom .navbar-nav > li > .dropdown-menu, [dir=ltr] .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { | |
| border-bottom-right-radius: 0; | |
| border-bottom-left-radius: 0; } | |
| [dir=rtl] .navbar.sticky-bottom .navbar-nav > li > .dropdown-menu, [dir=rtl] .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { | |
| border-bottom-left-radius: 0; | |
| border-bottom-right-radius: 0; } | |
| [dir=ltr] .navbar-nav.pull-right > li > .dropdown-menu, [dir=ltr] .navbar-nav > li > .dropdown-menu.pull-right { | |
| left: auto; | |
| right: 0; } | |
| [dir=rtl] .navbar-nav.pull-right > li > .dropdown-menu, [dir=rtl] .navbar-nav > li > .dropdown-menu.pull-right { | |
| right: auto; | |
| left: 0; } | |
| [dir] .navbar-btn { | |
| margin-top: 8px; | |
| margin-bottom: 8px; } | |
| [dir] .navbar-text { | |
| margin: 12px 10px; } | |
| [dir=ltr] .navbar-text { | |
| float: left; } | |
| [dir=rtl] .navbar-text { | |
| float: right; } | |
| @media (max-width: 819px) { | |
| .navbar-right { | |
| display: none; } } | |
| /** | |
| * Main Menus | |
| * | |
| * The main menus for link and desktop can be seen on demo pages. | |
| * <br><br><a href="menu-desktop.html" class="btn btn-large btn-info">See Desktop Menu Demo Page</a> | |
| * <br><br><a href="menu-link.html" class="btn btn-large btn-info">See Link Menu Demo Page</a> | |
| * | |
| * Styleguide 40.1 | |
| */ | |
| [dir] .etched-top { | |
| border-top: 1px solid #4c3337; } | |
| .etched-top::before { | |
| display: block; | |
| content: ' '; | |
| width: 100%; | |
| top: 0; | |
| height: 1px; | |
| position: absolute; } | |
| [dir] .etched-top::before { | |
| background-color: #614348; } | |
| [dir=ltr] .etched-top::before { | |
| left: 0; } | |
| [dir=rtl] .etched-top::before { | |
| right: 0; } | |
| [dir] .etched-bottom { | |
| border-bottom: 1px solid #614348; } | |
| .etched-bottom::after { | |
| display: block; | |
| content: ' '; | |
| width: 100%; | |
| bottom: 0; | |
| height: 1px; | |
| position: absolute; } | |
| [dir] .etched-bottom::after { | |
| background-color: #4c3337; } | |
| [dir=ltr] .etched-bottom::after { | |
| left: 0; } | |
| [dir=rtl] .etched-bottom::after { | |
| right: 0; } | |
| [dir=ltr] .etched-right { | |
| border-right: 1px solid #614348; } | |
| [dir=rtl] .etched-right { | |
| border-left: 1px solid #614348; } | |
| .etched-right::after { | |
| display: block; | |
| content: ' '; | |
| height: 100%; | |
| top: 0; | |
| width: 1px; | |
| position: absolute; } | |
| [dir] .etched-right::after { | |
| background-color: #4c3337; } | |
| [dir=ltr] .etched-right::after { | |
| right: 0; } | |
| [dir=rtl] .etched-right::after { | |
| left: 0; } | |
| .main-menu.narrow-menu, | |
| .main-menu.wide-menu { | |
| -webkit-touch-callout: none; | |
| user-select: none; } | |
| .main-menu.narrow-menu a, | |
| .main-menu.wide-menu a { | |
| color: #b3b3b3; | |
| text-decoration: none; | |
| position: relative; | |
| font-weight: 400; } | |
| .main-menu.narrow-menu a:hover, | |
| .main-menu.wide-menu a:hover { | |
| color: white; } | |
| .main-menu.narrow-menu a.active, .main-menu.narrow-menu a.selected, | |
| .main-menu.wide-menu a.active, | |
| .main-menu.wide-menu a.selected { | |
| color: #ffffff; } | |
| .main-menu.narrow-menu a.active:hover, .main-menu.narrow-menu a.selected:hover, | |
| .main-menu.wide-menu a.active:hover, | |
| .main-menu.wide-menu a.selected:hover { | |
| color: #ffffff; } | |
| .main-menu.narrow-menu li, | |
| .main-menu.wide-menu li { | |
| position: relative; } | |
| .main-menu.narrow-menu { | |
| min-height: 595px; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 90px; | |
| z-index: 1000; } | |
| [dir] .main-menu.narrow-menu { | |
| background-color: #614348; } | |
| [dir=ltr] .main-menu.narrow-menu { | |
| left: 0; } | |
| [dir=rtl] .main-menu.narrow-menu { | |
| right: 0; } | |
| .main-menu.narrow-menu .logo { | |
| display: block; | |
| height: 95px; } | |
| [dir] .main-menu.narrow-menu .logo { | |
| background: url("https://d2j0f09xqmv212.cloudfront.net/images/logo-vertical-dark-background-54.png") no-repeat center; | |
| cursor: auto; } | |
| .main-menu.narrow-menu a { | |
| height: 75px; | |
| width: 90px; | |
| display: block; } | |
| [dir] .main-menu.narrow-menu a { | |
| padding: 50px 10px 0 10px; } | |
| .main-menu.narrow-menu a::before { | |
| position: absolute; | |
| top: 18px; | |
| width: 100%; | |
| font-size: 32px; } | |
| [dir] .main-menu.narrow-menu a::before { | |
| text-align: center; } | |
| [dir=ltr] .main-menu.narrow-menu a::before { | |
| left: 0; } | |
| [dir=rtl] .main-menu.narrow-menu a::before { | |
| right: 0; } | |
| .main-menu.narrow-menu a.active, .main-menu.narrow-menu a.selected { | |
| color: #ffffff; } | |
| .main-menu.narrow-menu a.active::after, .main-menu.narrow-menu a.selected::after { | |
| content: ' '; | |
| display: block; | |
| position: absolute; | |
| top: 50%; | |
| height: 43px; | |
| width: 3px; } | |
| [dir] .main-menu.narrow-menu a.active::after, [dir] .main-menu.narrow-menu a.selected::after { | |
| background-color: #1db954; | |
| margin-top: -22px; } | |
| [dir=ltr] .main-menu.narrow-menu a.active::after, [dir=ltr] .main-menu.narrow-menu a.selected::after { | |
| left: 0; } | |
| [dir=rtl] .main-menu.narrow-menu a.active::after, [dir=rtl] .main-menu.narrow-menu a.selected::after { | |
| right: 0; } | |
| .main-menu.narrow-menu a .nav-text { | |
| display: block; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| [dir] .main-menu.narrow-menu a .nav-text { | |
| text-align: center; } | |
| [dir] .main-menu.narrow-menu a:hover { | |
| border-color: transparent; } | |
| .main-menu.narrow-menu a#nav-profile { | |
| line-height: 1.2; | |
| height: auto; } | |
| [dir] .main-menu.narrow-menu a#nav-profile { | |
| padding: 0 10px; | |
| margin: 0; } | |
| [dir] .main-menu.narrow-menu a#nav-profile .media { | |
| margin: 24px 14px 5px; } | |
| .main-menu.narrow-menu a#nav-profile .media .media-image .media-image-internal, | |
| .main-menu.narrow-menu a#nav-profile .media .media-image .media-placeholder { | |
| top: 0; | |
| bottom: 0; } | |
| [dir=ltr] .main-menu.narrow-menu a#nav-profile .media .media-image .media-image-internal, [dir=ltr] .main-menu.narrow-menu a#nav-profile .media .media-image .media-placeholder { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .main-menu.narrow-menu a#nav-profile .media .media-image .media-image-internal, [dir=rtl] .main-menu.narrow-menu a#nav-profile .media .media-image .media-placeholder { | |
| left: 0; | |
| right: 0; } | |
| .main-menu.narrow-menu a#nav-messages, .main-menu.narrow-menu a#nav-notifications { | |
| display: block; | |
| width: 100%; | |
| height: 47px; } | |
| [dir] .main-menu.narrow-menu a#nav-messages, [dir] .main-menu.narrow-menu a#nav-notifications { | |
| padding: 28px 0 3px; | |
| margin: 0; } | |
| .main-menu.narrow-menu a#nav-messages::before, .main-menu.narrow-menu a#nav-notifications::before { | |
| position: absolute; | |
| top: 1px; | |
| font-size: 20px; | |
| width: 100%; } | |
| [dir] .main-menu.narrow-menu a#nav-messages::before, [dir] .main-menu.narrow-menu a#nav-notifications::before { | |
| text-align: center; } | |
| [dir=ltr] .main-menu.narrow-menu a#nav-messages::before, [dir=ltr] .main-menu.narrow-menu a#nav-notifications::before { | |
| left: 0; } | |
| [dir=rtl] .main-menu.narrow-menu a#nav-messages::before, [dir=rtl] .main-menu.narrow-menu a#nav-notifications::before { | |
| right: 0; } | |
| .main-menu.narrow-menu a#nav-messages.active, .main-menu.narrow-menu a#nav-notifications.active { | |
| color: #1ed760; } | |
| [dir] .main-menu.narrow-menu a#nav-messages.active, [dir] .main-menu.narrow-menu a#nav-notifications.active { | |
| border: none !important; } | |
| .main-menu.narrow-menu a#nav-messages.active::before, .main-menu.narrow-menu a#nav-notifications.active::before { | |
| color: #1ed760; } | |
| .main-menu.narrow-menu a#nav-messages.active::after, .main-menu.narrow-menu a#nav-notifications.active::after { | |
| display: none; } | |
| .main-menu.narrow-menu a#nav-settings { | |
| height: 38px; } | |
| [dir] .main-menu.narrow-menu a#nav-settings { | |
| margin: 0 0 2px; } | |
| .main-menu.narrow-menu a#nav-settings::before { | |
| top: 13px; | |
| font-size: 24px; } | |
| [dir] .main-menu.narrow-menu a#nav-settings::before { | |
| text-align: center; } | |
| [dir=ltr] .main-menu.narrow-menu a#nav-settings::before { | |
| left: 0; } | |
| [dir=rtl] .main-menu.narrow-menu a#nav-settings::before { | |
| right: 0; } | |
| .main-menu.narrow-menu a#nav-settings.active { | |
| color: #ffffff; } | |
| .main-menu.narrow-menu a#nav-settings.active::after { | |
| display: none; } | |
| [dir] .main-menu.narrow-menu a.logo { | |
| margin: 0; } | |
| .main-menu.narrow-menu .item-profile { | |
| position: absolute; | |
| bottom: 110px; } | |
| .main-menu.narrow-menu .messages-link, | |
| .main-menu.narrow-menu .item-notifications { | |
| position: absolute; | |
| width: 50%; | |
| bottom: 50px; } | |
| [dir] .main-menu.narrow-menu .messages-link, [dir] .main-menu.narrow-menu .item-notifications { | |
| text-align: center; } | |
| [dir=ltr] .main-menu.narrow-menu .item-notifications { | |
| left: 50%; } | |
| [dir=rtl] .main-menu.narrow-menu .item-notifications { | |
| right: 50%; } | |
| .main-menu.narrow-menu .settings-link { | |
| position: absolute; | |
| bottom: 0; } | |
| .main-menu.narrow-menu .name { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| @media (max-height: 758px) { | |
| .main-menu.narrow-menu .main-menu-nav a.standard-menu-item { | |
| height: 63px; } | |
| [dir] .main-menu.narrow-menu .main-menu-nav a.standard-menu-item { | |
| padding: 36px 10px 0 10px; } | |
| .main-menu.narrow-menu .main-menu-nav a.standard-menu-item::before { | |
| top: 12px; | |
| font-size: 24px; } | |
| .main-menu.narrow-menu .main-menu-nav a.standard-menu-item.active::after, .main-menu.narrow-menu .main-menu-nav a.standard-menu-item.selected::after { | |
| height: 38px; } | |
| [dir] .main-menu.narrow-menu .main-menu-nav a.standard-menu-item.active::after, [dir] .main-menu.narrow-menu .main-menu-nav a.standard-menu-item.selected::after { | |
| margin-top: -22px; } } | |
| @media (max-height: 670px) { | |
| .main-menu.narrow-menu .logo { | |
| height: 34px; } | |
| [dir] .main-menu.narrow-menu .logo { | |
| margin: 0 5px; | |
| background: url("https://d2j0f09xqmv212.cloudfront.net/images/logo-navbar.png") no-repeat center; | |
| background-size: 83%; } | |
| .main-menu.narrow-menu .item-profile { | |
| bottom: 75px; } | |
| .main-menu.narrow-menu .messages-link, | |
| .main-menu.narrow-menu .item-notifications { | |
| bottom: 36px; } | |
| [dir] .main-menu.narrow-menu a#nav-profile .media { | |
| margin: 20px 20px 3px; } | |
| .main-menu.narrow-menu a#nav-messages, .main-menu.narrow-menu a#nav-notifications { | |
| height: 26px; | |
| font-size: 12px; } | |
| [dir] .main-menu.narrow-menu a#nav-messages, [dir] .main-menu.narrow-menu a#nav-notifications { | |
| margin: 0; } | |
| [dir=ltr] .main-menu.narrow-menu a#nav-messages, [dir=ltr] .main-menu.narrow-menu a#nav-notifications { | |
| padding: 3px 0 0 11px; } | |
| [dir=rtl] .main-menu.narrow-menu a#nav-messages, [dir=rtl] .main-menu.narrow-menu a#nav-notifications { | |
| padding: 3px 11px 0 0; } | |
| .main-menu.narrow-menu a#nav-messages::before, .main-menu.narrow-menu a#nav-notifications::before { | |
| top: 0; | |
| font-size: 16px; } | |
| [dir=ltr] .main-menu.narrow-menu a#nav-messages::before, [dir=ltr] .main-menu.narrow-menu a#nav-notifications::before { | |
| left: 0; | |
| text-align: left; } | |
| [dir=rtl] .main-menu.narrow-menu a#nav-messages::before, [dir=rtl] .main-menu.narrow-menu a#nav-notifications::before { | |
| right: 0; | |
| text-align: right; } | |
| [dir=ltr] .main-menu.narrow-menu a#nav-messages { | |
| padding-left: 25px; } | |
| [dir=rtl] .main-menu.narrow-menu a#nav-messages { | |
| padding-right: 25px; } | |
| [dir=ltr] .main-menu.narrow-menu a#nav-messages::before { | |
| left: 8px; } | |
| [dir=rtl] .main-menu.narrow-menu a#nav-messages::before { | |
| right: 8px; } | |
| [dir=ltr] .main-menu.narrow-menu a#nav-notifications { | |
| padding-left: 9px; } | |
| [dir=rtl] .main-menu.narrow-menu a#nav-notifications { | |
| padding-right: 9px; } | |
| [dir=ltr] .main-menu.narrow-menu a#nav-notifications::before { | |
| left: 5px; } | |
| [dir=rtl] .main-menu.narrow-menu a#nav-notifications::before { | |
| right: 5px; } | |
| .main-menu.narrow-menu a#nav-settings { | |
| bottom: 0; | |
| height: auto; | |
| position: absolute; } | |
| [dir] .main-menu.narrow-menu a#nav-settings { | |
| padding-top: 36px; } | |
| .main-menu.narrow-menu a#nav-settings::before { | |
| font-size: 16px; } } | |
| .main-menu-bottom { | |
| position: absolute; | |
| bottom: 0; } | |
| [dir] .main-menu-bottom { | |
| border-top: 1px solid #4c3337; } | |
| [dir=ltr] .main-menu-bottom { | |
| left: 0; | |
| right: 0; } | |
| [dir=rtl] .main-menu-bottom { | |
| right: 0; | |
| left: 0; } | |
| .main-menu-bottom::before { | |
| display: block; | |
| content: ' '; | |
| width: 100%; | |
| top: 0; | |
| height: 1px; | |
| position: absolute; } | |
| [dir] .main-menu-bottom::before { | |
| background-color: #614348; } | |
| [dir=ltr] .main-menu-bottom::before { | |
| left: 0; } | |
| [dir=rtl] .main-menu-bottom::before { | |
| right: 0; } | |
| .main-menu-nav, | |
| .main-menu-nav ul { | |
| list-style: none; } | |
| [dir=ltr] .main-menu-nav, [dir=ltr] .main-menu-nav ul { | |
| padding-left: 0; } | |
| [dir=rtl] .main-menu-nav, [dir=rtl] .main-menu-nav ul { | |
| padding-right: 0; } | |
| .main-menu.wide-menu { | |
| max-height: 100%; | |
| height: 100%; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| min-height: 100%; } | |
| [dir] .main-menu.wide-menu { | |
| background-color: #614348; } | |
| .main-menu.wide-menu a:not(.button), | |
| .main-menu.wide-menu .item { | |
| display: block; | |
| line-height: 36px; } | |
| [dir] .main-menu.wide-menu a:not(.button), [dir] .main-menu.wide-menu .item { | |
| cursor: default; | |
| padding: 3px 0; | |
| border-bottom: none; } | |
| [dir] .main-menu.wide-menu a:not(.button):hover, [dir] .main-menu.wide-menu .item:hover { | |
| border-bottom: none; } | |
| .main-menu.wide-menu a.active::after, | |
| .main-menu.wide-menu a.selected::after, | |
| .main-menu.wide-menu .item.active::after, | |
| .main-menu.wide-menu .item.selected::after { | |
| content: ' '; | |
| display: block; | |
| position: absolute; | |
| top: 3px; | |
| bottom: 3px; | |
| width: 1px; } | |
| [dir] .main-menu.wide-menu a.active::after, [dir] .main-menu.wide-menu a.selected::after, [dir] .main-menu.wide-menu .item.active::after, [dir] .main-menu.wide-menu .item.selected::after { | |
| border-radius: 13px; } | |
| [dir=ltr] .main-menu.wide-menu a.active::after, [dir=ltr] .main-menu.wide-menu a.selected::after, [dir=ltr] .main-menu.wide-menu .item.active::after, [dir=ltr] .main-menu.wide-menu .item.selected::after { | |
| border-right: 5px solid #1db954; | |
| left: -4px; } | |
| [dir=rtl] .main-menu.wide-menu a.active::after, [dir=rtl] .main-menu.wide-menu a.selected::after, [dir=rtl] .main-menu.wide-menu .item.active::after, [dir=rtl] .main-menu.wide-menu .item.selected::after { | |
| border-left: 5px solid #1db954; | |
| right: -4px; } | |
| .main-menu.wide-menu li::after { | |
| content: ""; | |
| display: table; } | |
| [dir] .main-menu.wide-menu li::after { | |
| clear: both; } | |
| .main-menu.wide-menu li.folder .folder-disclosure { | |
| position: absolute; | |
| display: block; | |
| height: 100%; | |
| top: 0; | |
| width: 32px; } | |
| [dir] .main-menu.wide-menu li.folder .folder-disclosure { | |
| padding: 9px 0; | |
| text-align: center; } | |
| [dir=ltr] .main-menu.wide-menu li.folder .folder-disclosure { | |
| right: 0; } | |
| [dir=rtl] .main-menu.wide-menu li.folder .folder-disclosure { | |
| left: 0; } | |
| .main-menu.wide-menu li.folder .folder-disclosure:hover { | |
| color: #ffffff; } | |
| .main-menu.wide-menu li.folder .folder-disclosure::before { | |
| font-size: 24px; } | |
| [dir=ltr] .main-menu.wide-menu li.folder > a, [dir=ltr] .main-menu.wide-menu li.folder > .item { | |
| margin-right: 32px; } | |
| [dir=rtl] .main-menu.wide-menu li.folder > a, [dir=rtl] .main-menu.wide-menu li.folder > .item { | |
| margin-left: 32px; } | |
| .main-menu.wide-menu li.folder > ul { | |
| display: none; } | |
| .main-menu.wide-menu li.folder.open > .folder-disclosure::before { | |
| content: "\f10c"; } | |
| .main-menu.wide-menu li.folder.open > ul { | |
| display: block; } | |
| .main-menu.wide-menu .menu-accessory { | |
| width: 26px; } | |
| [dir=ltr] .main-menu.wide-menu .menu-accessory { | |
| float: left; | |
| margin-left: 10px; } | |
| [dir=rtl] .main-menu.wide-menu .menu-accessory { | |
| float: right; | |
| margin-right: 10px; } | |
| .main-menu.wide-menu .menu-accessory::before { | |
| font-size: 24px; | |
| vertical-align: -6px; } | |
| [dir] .main-menu.wide-menu .menu-accessory.media { | |
| margin-top: 5px; } | |
| .main-menu.wide-menu .title, | |
| .main-menu.wide-menu .sub-title { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| white-space: pre; } | |
| [dir=ltr] .main-menu.wide-menu .title, [dir=ltr] .main-menu.wide-menu .sub-title { | |
| margin-left: 46px; } | |
| [dir=rtl] .main-menu.wide-menu .title, [dir=rtl] .main-menu.wide-menu .sub-title { | |
| margin-right: 46px; } | |
| .main-menu.wide-menu .twoline .title { | |
| line-height: 20px; } | |
| .main-menu.wide-menu .twoline .sub-title { | |
| line-height: 16px; | |
| font-size: 12px; } | |
| .main-menu.wide-menu .new-playlist { | |
| width: auto; } | |
| [dir] .main-menu.wide-menu .new-playlist { | |
| margin: 8px 12px 4px; } | |
| .main-menu.wide-menu .highlighted-folder > a::after { | |
| content: ' '; | |
| display: block; | |
| position: absolute; | |
| bottom: 1px; | |
| height: 2px; | |
| width: 100%; } | |
| [dir] .main-menu.wide-menu .highlighted-folder > a::after { | |
| background-color: #1db954; } | |
| .main-menu-nav ul { | |
| position: relative; } | |
| [dir] .main-menu-nav ul { | |
| border-top: 1px solid rgba(0, 0, 0, 0.8); | |
| border-bottom: 1px solid #614348; | |
| background-color: rgba(0, 0, 0, 0.2); } | |
| .main-menu-nav ul::after { | |
| display: block; | |
| content: ' '; | |
| width: 100%; | |
| bottom: 0; | |
| height: 1px; | |
| position: absolute; } | |
| [dir] .main-menu-nav ul::after { | |
| background-color: #4c3337; } | |
| [dir=ltr] .main-menu-nav ul::after { | |
| left: 0; } | |
| [dir=rtl] .main-menu-nav ul::after { | |
| right: 0; } | |
| #renamer { | |
| display: none; | |
| position: absolute; | |
| width: auto; } | |
| [dir=ltr] #renamer { | |
| right: 12px; } | |
| [dir=rtl] #renamer { | |
| left: 12px; } | |
| #drag-divider { | |
| position: absolute; | |
| top: 30px; | |
| z-index: 99; | |
| height: 1px; | |
| width: auto; } | |
| [dir] #drag-divider { | |
| background-color: #ffffff; } | |
| [dir=ltr] #drag-divider { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] #drag-divider { | |
| left: 0; | |
| right: 0; } | |
| /** | |
| * Tooltips | |
| * | |
| * These are used to display informational text. | |
| * | |
| * Template: tooltip | |
| * | |
| * Styleguide 50.3 | |
| */ | |
| .tooltip, #tooltip { | |
| position: absolute; | |
| z-index: 1030; | |
| display: block; | |
| visibility: visible; | |
| color: #b3b3b3; | |
| text-decoration: none; | |
| pointer-events: none; | |
| font-size: 14px; | |
| line-height: 20px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: none; } | |
| [dir] .tooltip, [dir] #tooltip { | |
| padding: 3px 8px; | |
| background-color: #614348; | |
| border-radius: 4px; | |
| box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.5); } | |
| [dir] .body-container--windows .tooltip, [dir] .body-container--windows #tooltip, [dir] .body-container--unknown-os .tooltip, [dir] .body-container--unknown-os #tooltip { | |
| border-radius: 0; } | |
| [dir] .tooltip:not(.no-arrow).arrow-top, [dir] #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; } | |
| [dir] .tooltip:not(.no-arrow).arrow-top::before, [dir] #tooltip:not(.no-arrow).arrow-top::before { | |
| border: 5px solid transparent; | |
| border-bottom: 5px solid #614348; } | |
| [dir=ltr] .tooltip:not(.no-arrow).arrow-top::before, [dir=ltr] #tooltip:not(.no-arrow).arrow-top::before { | |
| left: 50%; | |
| margin-left: -5px; | |
| margin-right: -5px; } | |
| [dir=rtl] .tooltip:not(.no-arrow).arrow-top::before, [dir=rtl] #tooltip:not(.no-arrow).arrow-top::before { | |
| right: 50%; | |
| margin-right: -5px; | |
| margin-left: -5px; } | |
| [dir] .tooltip:not(.no-arrow).arrow-bottom, [dir] #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; } | |
| [dir] .tooltip:not(.no-arrow).arrow-bottom::before, [dir] #tooltip:not(.no-arrow).arrow-bottom::before { | |
| border: 5px solid transparent; | |
| border-top: 5px solid #614348; } | |
| [dir=ltr] .tooltip:not(.no-arrow).arrow-bottom::before, [dir=ltr] #tooltip:not(.no-arrow).arrow-bottom::before { | |
| left: 50%; | |
| margin-left: -5px; | |
| margin-right: -5px; } | |
| [dir=rtl] .tooltip:not(.no-arrow).arrow-bottom::before, [dir=rtl] #tooltip:not(.no-arrow).arrow-bottom::before { | |
| right: 50%; | |
| margin-right: -5px; | |
| margin-left: -5px; } | |
| [dir=ltr] .tooltip:not(.no-arrow).arrow-right, [dir=ltr] #tooltip:not(.no-arrow).arrow-right { | |
| margin-right: 5px; } | |
| [dir=rtl] .tooltip:not(.no-arrow).arrow-right, [dir=rtl] #tooltip:not(.no-arrow).arrow-right { | |
| margin-left: 5px; } | |
| .tooltip:not(.no-arrow).arrow-right::before, #tooltip:not(.no-arrow).arrow-right::before { | |
| position: absolute; | |
| width: 0; | |
| height: 0; | |
| content: ""; | |
| top: 50%; } | |
| [dir] .tooltip:not(.no-arrow).arrow-right::before, [dir] #tooltip:not(.no-arrow).arrow-right::before { | |
| border: 5px solid transparent; | |
| margin-top: -5px; | |
| margin-bottom: -5px; } | |
| [dir=ltr] .tooltip:not(.no-arrow).arrow-right::before, [dir=ltr] #tooltip:not(.no-arrow).arrow-right::before { | |
| right: -10px; | |
| border-left: 5px solid #614348; } | |
| [dir=rtl] .tooltip:not(.no-arrow).arrow-right::before, [dir=rtl] #tooltip:not(.no-arrow).arrow-right::before { | |
| left: -10px; | |
| border-right: 5px solid #614348; } | |
| [dir=ltr] .tooltip:not(.no-arrow).arrow-left, [dir=ltr] #tooltip:not(.no-arrow).arrow-left { | |
| margin-left: 5px; } | |
| [dir=rtl] .tooltip:not(.no-arrow).arrow-left, [dir=rtl] #tooltip:not(.no-arrow).arrow-left { | |
| margin-right: 5px; } | |
| .tooltip:not(.no-arrow).arrow-left::before, #tooltip:not(.no-arrow).arrow-left::before { | |
| position: absolute; | |
| width: 0; | |
| height: 0; | |
| content: ""; | |
| top: 50%; } | |
| [dir] .tooltip:not(.no-arrow).arrow-left::before, [dir] #tooltip:not(.no-arrow).arrow-left::before { | |
| border: 5px solid transparent; | |
| margin-top: -5px; | |
| margin-bottom: -5px; } | |
| [dir=ltr] .tooltip:not(.no-arrow).arrow-left::before, [dir=ltr] #tooltip:not(.no-arrow).arrow-left::before { | |
| left: -10px; | |
| border-right: 5px solid #614348; } | |
| [dir=rtl] .tooltip:not(.no-arrow).arrow-left::before, [dir=rtl] #tooltip:not(.no-arrow).arrow-left::before { | |
| right: -10px; | |
| border-left: 5px solid #614348; } | |
| [dir=ltr] .tooltip:not(.no-arrow).arrow-position-left::before, [dir=ltr] #tooltip:not(.no-arrow).arrow-position-left::before { | |
| left: 20px; } | |
| [dir=rtl] .tooltip:not(.no-arrow).arrow-position-left::before, [dir=rtl] #tooltip:not(.no-arrow).arrow-position-left::before { | |
| right: 20px; } | |
| [dir=ltr] .tooltip:not(.no-arrow).arrow-position-right::before, [dir=ltr] #tooltip:not(.no-arrow).arrow-position-right::before { | |
| left: auto; | |
| right: 20px; } | |
| [dir=rtl] .tooltip:not(.no-arrow).arrow-position-right::before, [dir=rtl] #tooltip:not(.no-arrow).arrow-position-right::before { | |
| right: auto; | |
| left: 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; } | |
| [dir] .tooltip.text .tooltip-inner, [dir] .text#tooltip .tooltip-inner { | |
| background-color: #614348; | |
| text-align: center; } | |
| .tooltip.tooltip-large, .tooltip-large#tooltip { | |
| font-size: 18px; | |
| line-height: 1.5; } | |
| [dir] .tooltip.tooltip-large, [dir] .tooltip-large#tooltip { | |
| padding: 6px 10px; } | |
| .tooltip-arrow-top, .tooltip-arrow-bottom { | |
| height: 0; | |
| position: absolute; | |
| top: -5px; | |
| display: none; | |
| width: 0; } | |
| [dir] .tooltip-arrow-top, [dir] .tooltip-arrow-bottom { | |
| border-bottom: 5px solid #614348; } | |
| [dir=ltr] .tooltip-arrow-top, [dir=ltr] .tooltip-arrow-bottom { | |
| border-left: 5px solid transparent; | |
| border-right: 5px solid transparent; } | |
| [dir=rtl] .tooltip-arrow-top, [dir=rtl] .tooltip-arrow-bottom { | |
| border-right: 5px solid transparent; | |
| border-left: 5px solid transparent; } | |
| .tooltip-arrow-top.visible, .visible.tooltip-arrow-bottom { | |
| display: block; } | |
| .tooltip-arrow-bottom { | |
| bottom: -5px; | |
| top: auto; } | |
| [dir] .tooltip-arrow-bottom { | |
| border-top: 5px solid #614348; | |
| 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; } | |
| [dir=ltr] #tooltip.visible { | |
| animation: tooltipShow 1s ease forwards; } | |
| [dir=rtl] #tooltip.visible { | |
| animation: tooltipShow 1s ease forwards; } | |
| #tooltip.visible.instant { | |
| opacity: 1; } | |
| [dir=ltr] #tooltip.visible.instant { | |
| animation: none; } | |
| [dir=rtl] #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. <span class="text-warning">The interior corners are not | |
| * rounded. The rounding must be done by the container.</span> | |
| * | |
| * 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; } | |
| [dir] .popover { | |
| background-color: #614348; | |
| background-clip: padding-box; | |
| border-radius: 8px; } | |
| [dir=ltr] .popover { | |
| text-align: left; } | |
| [dir=rtl] .popover { | |
| text-align: right; } | |
| [dir] .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; } | |
| [dir] .popover:not(.no-arrow).arrow-top::before { | |
| border: 10px solid transparent; | |
| border-bottom: 10px solid #614348; } | |
| [dir=ltr] .popover:not(.no-arrow).arrow-top::before { | |
| left: 50%; | |
| margin-left: -10px; | |
| margin-right: -10px; } | |
| [dir=rtl] .popover:not(.no-arrow).arrow-top::before { | |
| right: 50%; | |
| margin-right: -10px; | |
| margin-left: -10px; } | |
| [dir] .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; } | |
| [dir] .popover:not(.no-arrow).arrow-bottom::before { | |
| border: 10px solid transparent; | |
| border-top: 10px solid #614348; } | |
| [dir=ltr] .popover:not(.no-arrow).arrow-bottom::before { | |
| left: 50%; | |
| margin-left: -10px; | |
| margin-right: -10px; } | |
| [dir=rtl] .popover:not(.no-arrow).arrow-bottom::before { | |
| right: 50%; | |
| margin-right: -10px; | |
| margin-left: -10px; } | |
| [dir=ltr] .popover:not(.no-arrow).arrow-right { | |
| margin-right: 10px; } | |
| [dir=rtl] .popover:not(.no-arrow).arrow-right { | |
| margin-left: 10px; } | |
| .popover:not(.no-arrow).arrow-right::before { | |
| position: absolute; | |
| width: 0; | |
| height: 0; | |
| content: ""; | |
| top: 50%; } | |
| [dir] .popover:not(.no-arrow).arrow-right::before { | |
| border: 10px solid transparent; | |
| margin-top: -10px; | |
| margin-bottom: -10px; } | |
| [dir=ltr] .popover:not(.no-arrow).arrow-right::before { | |
| right: -20px; | |
| border-left: 10px solid #614348; } | |
| [dir=rtl] .popover:not(.no-arrow).arrow-right::before { | |
| left: -20px; | |
| border-right: 10px solid #614348; } | |
| [dir=ltr] .popover:not(.no-arrow).arrow-left { | |
| margin-left: 10px; } | |
| [dir=rtl] .popover:not(.no-arrow).arrow-left { | |
| margin-right: 10px; } | |
| .popover:not(.no-arrow).arrow-left::before { | |
| position: absolute; | |
| width: 0; | |
| height: 0; | |
| content: ""; | |
| top: 50%; } | |
| [dir] .popover:not(.no-arrow).arrow-left::before { | |
| border: 10px solid transparent; | |
| margin-top: -10px; | |
| margin-bottom: -10px; } | |
| [dir=ltr] .popover:not(.no-arrow).arrow-left::before { | |
| left: -20px; | |
| border-right: 10px solid #614348; } | |
| [dir=rtl] .popover:not(.no-arrow).arrow-left::before { | |
| right: -20px; | |
| border-left: 10px solid #614348; } | |
| [dir=ltr] .popover:not(.no-arrow).arrow-position-left::before { | |
| left: 20px; } | |
| [dir=rtl] .popover:not(.no-arrow).arrow-position-left::before { | |
| right: 20px; } | |
| [dir=ltr] .popover:not(.no-arrow).arrow-position-right::before { | |
| left: auto; | |
| right: 20px; } | |
| [dir=rtl] .popover:not(.no-arrow).arrow-position-right::before { | |
| right: auto; | |
| left: 20px; } | |
| .popover:not(.no-arrow).arrow-position-top::before { | |
| top: 20px; } | |
| .popover:not(.no-arrow).arrow-position-bottom::before { | |
| top: auto; | |
| bottom: 20px; } | |
| [dir] .popover:not(.no-arrow).arrow-top::before { | |
| border-bottom-color: #614348; } | |
| [dir=ltr] .popover.arrow-right.arrow-position-top::before { | |
| border-left-color: #614348; } | |
| [dir=rtl] .popover.arrow-right.arrow-position-top::before { | |
| border-right-color: #614348; } | |
| [dir=ltr] .popover.arrow-left.arrow-position-top::before { | |
| border-right-color: #614348; } | |
| [dir=rtl] .popover.arrow-left.arrow-position-top::before { | |
| border-left-color: #614348; } | |
| [dir] .body-container--windows .popover, [dir] .body-container--unknown-os .popover { | |
| border-radius: 0; } | |
| .popover-title { | |
| font-size: 14px; | |
| line-height: 20px; | |
| letter-spacing: 0.015em; | |
| font-weight: 400; | |
| color: #ffffff; | |
| text-transform: none; | |
| line-height: 36px; | |
| color: #ffffff; | |
| position: relative; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| [dir] .popover-title { | |
| margin: 0; | |
| padding: 2px 8px 0; | |
| text-align: center; | |
| background-color: #614348; | |
| border-bottom: 1px solid #614348; } | |
| [dir=ltr] .popover.closeable .popover-title { | |
| padding-left: 32px; } | |
| [dir=rtl] .popover.closeable .popover-title { | |
| padding-right: 32px; } | |
| .popover-nav { | |
| position: relative; } | |
| [dir] .popover-nav { | |
| margin: 0; } | |
| [dir=ltr] .popover-nav { | |
| float: right; | |
| left: -50%; | |
| text-align: left; } | |
| [dir=rtl] .popover-nav { | |
| float: left; | |
| right: -50%; | |
| text-align: right; } | |
| .popover-nav .nav { | |
| position: relative; } | |
| [dir] .popover-nav .nav { | |
| border-bottom: 0; } | |
| [dir=ltr] .popover-nav .nav { | |
| left: 50%; } | |
| [dir=rtl] .popover-nav .nav { | |
| right: 50%; } | |
| .popover-nav .nav > li.active > a { | |
| color: #ffffff; } | |
| [dir] .popover-nav .nav > li.active > a::after { | |
| background-color: #1db954; } | |
| .popover-nav .nav > li > a { | |
| color: rgba(255, 255, 255, 0.5); | |
| line-height: 34px; | |
| font-size: 12px; } | |
| [dir] .popover-nav .nav > li > a { | |
| border-bottom: none; | |
| margin-top: 2px; } | |
| .popover-nav .nav > li > a::after { | |
| width: auto; } | |
| [dir=ltr] .popover-nav .nav > li > a::after { | |
| right: -5px; | |
| left: -5px; } | |
| [dir=rtl] .popover-nav .nav > li > a::after { | |
| left: -5px; | |
| right: -5px; } | |
| .popover-nav .nav > li:hover a { | |
| color: #ffffff; } | |
| [dir] .popover-content, [dir] .popover-footer, [dir] .popover-addendum { | |
| padding: 9px 14px; } | |
| [dir] .popover-footer { | |
| padding-top: 0; | |
| background-color: #614348; } | |
| [dir=ltr] .popover-footer { | |
| text-align: right; } | |
| [dir=rtl] .popover-footer { | |
| text-align: left; } | |
| [dir] .popover-footer .button { | |
| margin: 0 6px; } | |
| .popover-content-scroll-area { | |
| height: 100%; | |
| overflow: scroll; } | |
| [dir] .popover-content-scroll-area { | |
| background-color: #614348; } | |
| /** | |
| * This is a dark area a the bottom of a popover that should be used for fine print. | |
| */ | |
| .popover-addendum { | |
| color: #a0a0a0; | |
| font-size: 12px; | |
| line-height: 16px; } | |
| [dir] .popover-addendum { | |
| background-color: #614348; | |
| border-top: 1px solid #614348; } | |
| /** | |
| * Modals | |
| * | |
| * Styleguide 50.6 | |
| */ | |
| /** | |
| * Modal Popovers | |
| * | |
| * A modal is just a special popover case.<br> | |
| * <a href="popover-modal.html" class="btn btn-info btn-large">See a modal in action</a> | |
| * | |
| * Styleguide 50.6.1 | |
| */ | |
| .popover.modal { | |
| overflow: auto; | |
| position: fixed; | |
| top: 0; | |
| bottom: 0; | |
| z-index: 1040; | |
| transition: opacity 0.3s linear, top 0.3s ease-out; } | |
| [dir] .popover.modal { | |
| background-color: #614348; } | |
| [dir=ltr] .popover.modal { | |
| right: 0; | |
| left: 0; | |
| box-shadow: 4px 6px 41px 0 rgba(0, 0, 0, 0.82); } | |
| [dir=rtl] .popover.modal { | |
| left: 0; | |
| right: 0; | |
| box-shadow: -4px 6px 41px 0 rgba(0, 0, 0, 0.82); } | |
| .popover.modal.fade { | |
| display: block; | |
| top: -25%; } | |
| .popover.modal.fade.in { | |
| top: 0; } | |
| .popover.modal.no-scroll { | |
| overflow: hidden; } | |
| .modal-open { | |
| overflow: hidden; } | |
| .modal-backdrop { | |
| position: fixed; | |
| top: 0; | |
| bottom: 0; | |
| z-index: -9999; | |
| opacity: 0; | |
| transition: opacity 0.3s linear; } | |
| [dir] .modal-backdrop { | |
| background-color: #4c3337; } | |
| [dir=ltr] .modal-backdrop { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .modal-backdrop { | |
| left: 0; | |
| right: 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; } | |
| [dir=ltr] .popover-title .spoticon-x-16 { | |
| right: 3px; } | |
| [dir=rtl] .popover-title .spoticon-x-16 { | |
| left: 3px; } | |
| .popover.modal { | |
| top: 50%; | |
| width: 560px; | |
| max-height: 465px; | |
| bottom: auto; } | |
| [dir] .popover.modal { | |
| margin-top: -232px; } | |
| [dir=ltr] .popover.modal { | |
| left: 50%; | |
| right: auto; | |
| margin-left: -280px; } | |
| [dir=rtl] .popover.modal { | |
| right: 50%; | |
| left: auto; | |
| margin-right: -280px; } | |
| .popover.modal.fade { | |
| top: 40%; } | |
| .popover.modal.fade.in { | |
| top: 50%; } | |
| /** | |
| * Generic modal | |
| * | |
| * A generic modal with a slight drop shadow and the ability to show a standardized title. | |
| * | |
| * Markup: <div class="modal modal-generic no-scroll"> | |
| * <div class="modal-generic-title">A title</div> | |
| * <div class="modal-generic-content">And some content</div> | |
| * </div> | |
| * | |
| * Styleguide 50.6.2 | |
| */ | |
| [dir] .modal-generic { | |
| background-color: #614348; } | |
| .modal-generic .modal-generic-title { | |
| font-size: 14px; | |
| line-height: 20px; | |
| letter-spacing: 0.015em; | |
| font-weight: 400; | |
| color: #ffffff; | |
| text-transform: none; } | |
| [dir] .modal-generic .modal-generic-title { | |
| background: #614348; | |
| text-align: center; | |
| padding: 10px; } | |
| .modal-generic .modal-generic-title .modal-dismiss-btn { | |
| position: absolute; | |
| top: 3px; } | |
| [dir=ltr] .modal-generic .modal-generic-title .modal-dismiss-btn { | |
| right: 3px; } | |
| [dir=rtl] .modal-generic .modal-generic-title .modal-dismiss-btn { | |
| left: 3px; } | |
| [dir] .modal-generic .modal-generic-content { | |
| padding: 10px; } | |
| /** | |
| * Generic error modal | |
| * | |
| * A standardized modal for displaying modal failures. | |
| * | |
| * Markup: <div class="modal modal-generic modal-generic-error no-scroll">Something failed to do something.</div> | |
| * | |
| * Styleguide 50.6.3 | |
| */ | |
| .modal-generic-error { | |
| font-size: 14px; | |
| line-height: 20px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: none; | |
| color: #ffffff; } | |
| [dir] .modal-generic-error { | |
| text-align: center; | |
| padding: 20px; } | |
| /** | |
| * Alerts | |
| * | |
| * Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. | |
| * To add a close-icon just add an element with the class .close | |
| * | |
| * Styleguide 50.5 | |
| */ | |
| /** | |
| * Contextual | |
| * | |
| * .alert-success - Successful message | |
| * .alert-danger - Warning message | |
| * .alert-info - Informational message | |
| * | |
| * Template: alerts | |
| * | |
| * Styleguide 50.5.1 | |
| */ | |
| /** | |
| * Contextual (two lines) | |
| * | |
| * .alert-success - Successful message | |
| * | |
| * Template: alerts-multiline | |
| * | |
| * Styleguide 50.5.1 | |
| */ | |
| .alert { | |
| color: #ffffff; | |
| position: relative; | |
| overflow: hidden; } | |
| [dir] .alert { | |
| padding: 6px 35px; | |
| margin-bottom: 20px; | |
| background-color: #4687d6; } | |
| .alert .alert-link { | |
| color: white; } | |
| .alert .alert-link:hover { | |
| color: white; } | |
| .alert::before { | |
| color: white; } | |
| .alert h4 { | |
| color: inherit; } | |
| [dir] .alert h4 { | |
| margin-top: 0; } | |
| [dir] .alert hr { | |
| border-top-color: #3179d1; } | |
| .alert .close { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #b3b3b3; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| width: 32px; | |
| color: #ffffff; | |
| position: absolute; | |
| top: 50%; } | |
| [dir] .alert .close { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: transparent; | |
| transition-property: transform, box-shadow, color, background-color; | |
| margin-top: -16px; } | |
| [dir=ltr] .alert .close { | |
| padding-left: 32px; | |
| padding-right: 32px; | |
| padding-left: 0; | |
| padding-right: 0; | |
| right: 0; } | |
| [dir=rtl] .alert .close { | |
| padding-right: 32px; | |
| padding-left: 32px; | |
| padding-right: 0; | |
| padding-left: 0; | |
| left: 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; } | |
| [dir] .alert .close .b-alt-text { | |
| margin-top: -30px; } | |
| .alert .close.contextmenu-active, .alert .close:not(:disabled):hover { | |
| color: #ffffff; } | |
| [dir] .alert .close.contextmenu-active, [dir] .alert .close:not(:disabled):hover { | |
| background-color: transparent; } | |
| .alert .close:not(:disabled):hover:active { | |
| color: #a0a0a0; } | |
| [dir] .alert .close:not(:disabled):hover:active { | |
| background: transparent; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .alert .close:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .alert .close { | |
| transition-duration: 50ms; } } | |
| .alert .close::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .alert .close::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .alert .close.contextmenu-active, [dir] .alert .close:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .alert .close.contextmenu-active, [dir] .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); } | |
| [dir] .alert .close.contextmenu-active::after, [dir] .alert .close:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .alert .close.contextmenu-active::after, [dir] .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; | |
| line-height: 32px; | |
| font-size: 16px; | |
| width: calc(100% - 8px); } | |
| [dir] .alert .close::before { | |
| border-radius: 500px; } | |
| [dir=ltr] .alert .close::before { | |
| left: 0; | |
| right: 0; | |
| text-align: left; | |
| padding-left: 8px; } | |
| [dir=rtl] .alert .close::before { | |
| right: 0; | |
| left: 0; | |
| text-align: right; | |
| padding-right: 8px; } | |
| .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; } | |
| [dir] .alert .close.button-play.playing:not(:hover), [dir] .tl-row.playing .alert .close.button-play:not(:hover), [dir] .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; } | |
| [dir] .alert .close.button-play.playing:not(:hover)::after, [dir] .tl-row.playing .alert .close.button-play:not(:hover)::after, [dir] .card.playing .alert .close.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .alert .close.button-play.playing:not(:hover)::after, [dir=ltr] .tl-row.playing .alert .close.button-play:not(:hover)::after, [dir=ltr] .card.playing .alert .close.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .alert .close.button-play.playing:not(:hover)::after, [dir=rtl] .tl-row.playing .alert .close.button-play:not(:hover)::after, [dir=rtl] .card.playing .alert .close.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .alert .close.button-play.playing:not(:hover).contextmenu-active, [dir] .alert .close.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .alert .close.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .alert .close.button-play:not(:hover).contextmenu-active, [dir] .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent; } | |
| [dir] .alert .close.button-play.playing:not(:hover).contextmenu-active::after, [dir] .alert .close.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .alert .close.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .alert .close.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .alert .close.button-play.playing:not(:hover).contextmenu-active, [dir] .alert .close.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .alert .close.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .alert .close.button-play:not(:hover).contextmenu-active, [dir] .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .alert .close.button-play.playing:not(:hover).contextmenu-active::after, [dir] .alert .close.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .alert .close.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .alert .close.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .alert .close.button-play.playing:not(:hover):not(:disabled):hover:active, [dir] .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing .alert .close.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .alert .close.button-play.playing:not(:hover):not(:disabled):hover:active::after, [dir] .tl-row.playing .alert .close.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir] .tl-row.playing.alert .close.button-play:not(:hover), [dir] .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; } | |
| [dir] .tl-row.playing.alert .close.button-play:not(:hover)::after, [dir] .card.playing.alert .close.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .tl-row.playing.alert .close.button-play:not(:hover)::after, [dir=ltr] .card.playing.alert .close.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row.playing.alert .close.button-play:not(:hover)::after, [dir=rtl] .card.playing.alert .close.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row.playing.alert .close.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.alert .close.button-play:not(:hover).contextmenu-active, [dir] .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.alert .close.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.alert .close.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .tl-row.playing.alert .close.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.alert .close.button-play:not(:hover).contextmenu-active, [dir] .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.alert .close.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.alert .close.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.alert .close.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .card.playing.alert .close.button-play:not(:hover):not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| .tl-row.playing.alert .close.button-play:not(:hover)::before, | |
| .card.playing.alert .close.button-play:not(:hover)::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f15e"; | |
| font-size: 16px; | |
| line-height: 32px; } | |
| .tl-row.playing.alert .close.button-play:hover::before, | |
| .card.playing.alert .close.button-play:hover::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f130"; | |
| font-size: 16px; | |
| line-height: 32px; } | |
| .alert .close.contextmenu-active, .alert .close:not(:disabled):hover { | |
| color: white; } | |
| .alert .close:not(:disabled):hover:active { | |
| color: #cccccc; } | |
| .alert::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f11e"; | |
| font-size: 16px; | |
| line-height: inherit; } | |
| .alert::before { | |
| position: absolute; | |
| top: 50%; } | |
| [dir] .alert::before { | |
| margin-top: -9.5px; } | |
| [dir=ltr] .alert::before { | |
| left: 10px; } | |
| [dir=rtl] .alert::before { | |
| right: 10px; } | |
| .alert a { | |
| color: #ffffff !important; } | |
| [dir] .alert a { | |
| border-bottom: solid 1px #ffffff !important; } | |
| [dir] .alert-success { | |
| background-color: #1db954; } | |
| .alert-success .alert-link { | |
| color: white; } | |
| .alert-success .alert-link:hover { | |
| color: white; } | |
| .alert-success::before { | |
| color: white; } | |
| [dir] .alert-danger { | |
| background-color: #cd1a2b; } | |
| .alert-danger .alert-link { | |
| color: white; } | |
| .alert-danger .alert-link:hover { | |
| color: white; } | |
| .alert-danger::before { | |
| color: white; } | |
| [dir] .alert-info { | |
| background-color: #4687d6; } | |
| .alert-info .alert-link { | |
| color: white; } | |
| .alert-info .alert-link:hover { | |
| color: white; } | |
| .alert-info::before { | |
| color: white; } | |
| /** | |
| * Labels | |
| * | |
| * For labeling stuff... | |
| * | |
| * .label-danger - To indicate danger. | |
| * .label-success - To indicate success. | |
| * .label-warning - To warn... | |
| * .label-info - To inform! | |
| * | |
| * Template: labels | |
| * | |
| * Styleguide 60.1 | |
| */ | |
| .label { | |
| display: inline; | |
| font-size: 12px; | |
| line-height: 1; | |
| font-size: 11px; | |
| line-height: 16px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; | |
| color: #614348; | |
| white-space: nowrap; | |
| vertical-align: middle; | |
| font-weight: 400; } | |
| [dir] .label { | |
| padding: 0.5em 0.6em 0.35em; | |
| text-shadow: 0 0 #614348; | |
| text-align: center; | |
| background-color: #a0a0a0; | |
| border-radius: 0.25em; } | |
| .label[href]:hover, .label[href]:focus { | |
| color: #ffffff; | |
| text-decoration: none; } | |
| [dir] .label[href]:hover, [dir] .label[href]:focus { | |
| cursor: pointer; | |
| background-color: #878787; } | |
| [dir] .label-danger { | |
| background-color: #cd1a2b; } | |
| [dir] .label-danger[href]:hover, [dir] .label-danger[href]:focus { | |
| background-color: #a01422; } | |
| [dir] .label-success { | |
| background-color: #1db954; } | |
| [dir] .label-success[href]:hover, [dir] .label-success[href]:focus { | |
| background-color: #168d40; } | |
| [dir] .label-warning { | |
| background-color: #4687d6; } | |
| [dir] .label-warning[href]:hover, [dir] .label-warning[href]:focus { | |
| background-color: #2a6dbf; } | |
| [dir] .label-info { | |
| background-color: #4687d6; } | |
| [dir] .label-info[href]:hover, [dir] .label-info[href]:focus { | |
| background-color: #2a6dbf; } | |
| /** | |
| * Badges | |
| * | |
| * Styleguide 60.2 | |
| */ | |
| /** | |
| * Base badge | |
| * | |
| * Markup: <a href="#">Inbox <span class="badge">42</span></a> | |
| * | |
| * Styleguide 60.2.1 | |
| */ | |
| .badge { | |
| color: #ffffff; | |
| display: inline-block; | |
| font-size: 12px; | |
| line-height: 1; | |
| min-width: 10px; | |
| position: relative; | |
| top: -1px; | |
| vertical-align: middle; | |
| white-space: nowrap; } | |
| [dir] .badge { | |
| background-color: #4687d6; | |
| border-radius: 10px; | |
| padding: 4px 7px 2px; | |
| text-align: center; | |
| text-shadow: none; } | |
| .badge:empty { | |
| display: none; } | |
| a.badge:hover, a.badge:focus { | |
| color: #fff; | |
| text-decoration: none; } | |
| [dir] a.badge:hover, [dir] a.badge:focus { | |
| cursor: pointer; } | |
| a.list-group-item.active > .badge, | |
| .nav-pills > .active > a > .badge { | |
| color: #ffffff; } | |
| [dir] a.list-group-item.active > .badge, [dir] .nav-pills > .active > a > .badge { | |
| background-color: #fff; } | |
| [dir=ltr] .nav-pills > li > a > .badge { | |
| margin-left: 3px; } | |
| [dir=rtl] .nav-pills > li > a > .badge { | |
| margin-right: 3px; } | |
| /** | |
| * Calendar icon | |
| * | |
| * Markup: | |
| * <div class="calendar-icon"> | |
| * <div class="calendar-icon-month">Dec</div> | |
| * <div class="calendar-icon-day">6</div> | |
| * </div> | |
| * | |
| * Styleguide 60.3 | |
| */ | |
| .calendar-icon { | |
| width: 48px; | |
| height: 48px; | |
| font-weight: bold; } | |
| [dir] .calendar-icon { | |
| text-align: center; } | |
| .calendar-icon-month { | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| color: #ffffff; | |
| height: 16px; | |
| line-height: 16px; } | |
| [dir] .calendar-icon-month { | |
| background-color: #f80046; } | |
| .calendar-icon-day { | |
| color: #614348; | |
| height: 32px; | |
| line-height: 32px; | |
| font-size: 22px; } | |
| [dir] .calendar-icon-day { | |
| background-color: #ffffff; } | |
| /** | |
| * A large variant of the calendar icon | |
| */ | |
| .calendar-icon--lg { | |
| width: 120px; | |
| height: 120px; } | |
| .calendar-icon--lg .calendar-icon-day { | |
| height: 83px; | |
| font-size: 64px; | |
| line-height: 83px; } | |
| .calendar-icon--lg .calendar-icon-month { | |
| height: 37px; | |
| font-size: 20px; | |
| line-height: 37px; } | |
| /** | |
| * Slider | |
| * | |
| * Markup: | |
| * <div class="slider {$modifiers}" onclick="this.className = 'slider enabled';"><div></div></div> | |
| * | |
| * .enabled - For sliders that are enabled | |
| * .disabled - For sliders that are unchangeable | |
| * | |
| * Styleguide 60.4 | |
| */ | |
| .slider { | |
| height: 22px; | |
| position: relative; | |
| transition: border 1.2s linear; | |
| transition: background 0.4s ease; | |
| width: 36px; } | |
| [dir] .slider { | |
| background: #4c3337; | |
| border: 2px solid #614348; | |
| border-radius: 11px; } | |
| [dir] .slider.enabled { | |
| background: #1db954; | |
| border-color: transparent; } | |
| [dir] .slider.enabled div { | |
| background: #ffffff; } | |
| [dir=ltr] .slider.enabled div { | |
| left: 15px; } | |
| [dir=rtl] .slider.enabled div { | |
| right: 15px; } | |
| .slider div { | |
| height: 22px; | |
| position: absolute; | |
| top: -2px; | |
| width: 22px; | |
| transition: all 0.4s ease; } | |
| [dir] .slider div { | |
| background: #a0a0a0; | |
| border-radius: inherit; | |
| box-shadow: 0 0 1px rgba(0, 0, 0, 0.75), 0 0 3px rgba(0, 0, 0, 0.3); } | |
| [dir=ltr] .slider div { | |
| left: -5px; } | |
| [dir=rtl] .slider div { | |
| right: -5px; } | |
| .slider:active div { | |
| width: 26px; } | |
| [dir] .slider:active div { | |
| background: #ffffff; } | |
| [dir=ltr] .slider.enabled:active div { | |
| left: 15px; } | |
| [dir=rtl] .slider.enabled:active div { | |
| right: 15px; } | |
| [dir] .slider:hover div { | |
| background: #ffffff; } | |
| .slider.disabled { | |
| pointer-events: none; } | |
| [dir] .slider.disabled { | |
| background: #614348; | |
| border-color: transparent; } | |
| [dir] .slider.disabled div { | |
| background: #614348; | |
| box-shadow: none; } | |
| .slider.disabled:active div { | |
| width: 22px; } | |
| [dir] .slider.disabled:active div { | |
| background: #614348; } | |
| [dir] .slider.disabled:hover div { | |
| background: #614348; } | |
| [dir=ltr] .slider.disabled.enabled:active div { | |
| left: 15px; } | |
| [dir=rtl] .slider.disabled.enabled:active div { | |
| right: 15px; } | |
| .slider:focus { | |
| outline: 0; } | |
| /** | |
| * Progress Bar | |
| * | |
| * The bar will occupy the full width of the parent container. | |
| * When the progress bar is being used apply .active to the wrapper to make the | |
| * handle look pressed. It will also enforce the expanded height while dragging. | |
| * | |
| * Length indication is controlled by setting the left property of the .handle and the | |
| * inverted right value of the .inner bar (1% done is 99% etc). | |
| * | |
| * Currently used in the player (web) for song position. | |
| * | |
| * Markup: | |
| * <div style="width: 150px;"> | |
| * <div class="progress-bar-wrapper {$modifiers}"> | |
| * <div class="progress-bar"><div class="inner"><div class="handle"></div></div></div> | |
| * </div> | |
| * </div> | |
| * | |
| * .active - To be controlled with JavaScript to indicate user interaction. | |
| * | |
| * Styleguide 60.5 | |
| */ | |
| .progress-bar, | |
| .progress-bar .inner { | |
| height: 4px; | |
| position: absolute; | |
| top: 50%; } | |
| [dir] .progress-bar, [dir] .progress-bar .inner { | |
| background: #614348; | |
| border-radius: 2px; | |
| margin-top: -2px; } | |
| [dir=ltr] .progress-bar, [dir=ltr] .progress-bar .inner { | |
| left: 0; | |
| right: 0; } | |
| [dir=rtl] .progress-bar, [dir=rtl] .progress-bar .inner { | |
| right: 0; | |
| left: 0; } | |
| .progress-bar .inner { | |
| bottom: 0; | |
| height: inherit; | |
| position: absolute; } | |
| [dir] .progress-bar .inner { | |
| background: #1ed760; } | |
| [dir=ltr] .progress-bar .inner { | |
| left: 0; | |
| right: auto; } | |
| [dir=rtl] .progress-bar .inner { | |
| right: 0; | |
| left: auto; } | |
| .progress-bar .handle { | |
| display: block; | |
| height: 12px; | |
| opacity: 0; | |
| position: absolute; | |
| top: -4px; | |
| width: 12px; } | |
| [dir] .progress-bar .handle { | |
| background: #ffffff; | |
| border-radius: 50%; | |
| border: 3px solid #ffffff; | |
| box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); } | |
| [dir=ltr] .progress-bar .handle { | |
| right: -6px; } | |
| [dir=rtl] .progress-bar .handle { | |
| left: -6px; } | |
| .progress-bar-wrapper { | |
| height: 20px; | |
| position: relative; } | |
| .progress-bar-wrapper.handle:hover .handle, .progress-bar-wrapper.active .handle { | |
| opacity: 1; } | |
| [dir] .progress-bar-wrapper.active .handle { | |
| background-color: #ffffff; } | |
| [dir=ltr] .progress-bar-wrapper.active .handle { | |
| box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), inset 2px 2px 3px rgba(0, 0, 0, 0.45); } | |
| [dir=rtl] .progress-bar-wrapper.active .handle { | |
| box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), inset -2px 2px 3px rgba(0, 0, 0, 0.45); } | |
| .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; } | |
| [dir] .card-attention-highlight-box { | |
| border: 2px solid #4687d6; } | |
| [dir=ltr] .card-attention-highlight-box { | |
| right: -6px; | |
| left: -6px; } | |
| [dir=rtl] .card-attention-highlight-box { | |
| left: -6px; | |
| right: -6px; } | |
| .card-show-attention-highlight .card-attention-highlight-box { | |
| transition: none; | |
| opacity: 1; } | |
| .card-image-wrapper { | |
| height: 100%; | |
| position: relative; } | |
| [dir] .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%; } | |
| [dir] .card-image { | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: cover; } | |
| [dir] .card-type-album .card-image, [dir] .card-type-collection-album .card-image, [dir] .card-type-track .card-image, [dir] .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%; } | |
| [dir] .card-placeholder-wrapper { | |
| background: #614348; } | |
| .card-image-link { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; } | |
| [dir] .card-image-link { | |
| border: none; } | |
| [dir=ltr] .card-image-link { | |
| left: 0; | |
| right: 0; } | |
| [dir=rtl] .card-image-link { | |
| right: 0; | |
| left: 0; } | |
| [dir] .card-type-artist .card-image, [dir] .card-type-artist .card-image-hit-area, [dir] .card-type-artist .card-overlay, [dir] .card-type-artist .card-placeholder-wrapper, [dir] .card-type-artist .card-image-link, [dir] .card-type-artist .card-hit-area-counter-scale, [dir] .card-type-collection-artist .card-image, [dir] .card-type-collection-artist .card-image-hit-area, [dir] .card-type-collection-artist .card-overlay, [dir] .card-type-collection-artist .card-placeholder-wrapper, [dir] .card-type-collection-artist .card-image-link, [dir] .card-type-collection-artist .card-hit-area-counter-scale, [dir] .card-type-user .card-image, [dir] .card-type-user .card-image-hit-area, [dir] .card-type-user .card-overlay, [dir] .card-type-user .card-placeholder-wrapper, [dir] .card-type-user .card-image-link, [dir] .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%; } | |
| [dir=ltr] .card-type-artist .card-image-hit-area, [dir=ltr] .card-type-collection-artist .card-image-hit-area, [dir=ltr] .card-type-user .card-image-hit-area { | |
| right: 5%; | |
| left: 5%; } | |
| [dir=rtl] .card-type-artist .card-image-hit-area, [dir=rtl] .card-type-collection-artist .card-image-hit-area, [dir=rtl] .card-type-user .card-image-hit-area { | |
| left: 5%; | |
| right: 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; } | |
| [dir=ltr] .card-placeholder { | |
| left: 20%; } | |
| [dir=rtl] .card-placeholder { | |
| right: 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; } | |
| [dir] .card-overlay { | |
| background: rgba(0, 0, 0, 0.6); } | |
| [dir=ltr] .card-overlay { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .card-overlay { | |
| left: 0; | |
| right: 0; } | |
| .card-type-artist .card-overlay, | |
| .card-type-collection-artist .card-overlay, | |
| .card-type-user .card-overlay { | |
| top: -1px; | |
| bottom: -1px; } | |
| [dir=ltr] .card-type-artist .card-overlay, [dir=ltr] .card-type-collection-artist .card-overlay, [dir=ltr] .card-type-user .card-overlay { | |
| right: -1px; | |
| left: -1px; } | |
| [dir=rtl] .card-type-artist .card-overlay, [dir=rtl] .card-type-collection-artist .card-overlay, [dir=rtl] .card-type-user .card-overlay { | |
| left: -1px; | |
| right: -1px; } | |
| .card-progress { | |
| position: absolute; | |
| bottom: 0; | |
| overflow: hidden; } | |
| [dir=ltr] .card-progress { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .card-progress { | |
| left: 0; | |
| right: 0; } | |
| .card-progress__bar { | |
| --progress: 0; | |
| /* [1] */ | |
| width: calc(var(--progress) * 100%); | |
| height: 8px; } | |
| [dir] .card-progress__bar { | |
| background-color: #4687d6; } | |
| .card-button-add, | |
| .card-button-play, | |
| .card-button-more { | |
| max-height: none; | |
| position: absolute; | |
| top: 50%; | |
| visibility: hidden; | |
| z-index: 4; } | |
| [dir] .card-button-add, [dir] .card-button-play, [dir] .card-button-more { | |
| box-shadow: none; | |
| cursor: default; } | |
| .card-button-add:focus, | |
| .card-button-play:focus, | |
| .card-button-more:focus { | |
| outline: none; } | |
| .card-button-add { | |
| top: 50%; | |
| height: 32px; | |
| line-height: 30px; | |
| color: #b3b3b3; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| width: 32px; | |
| color: #ffffff; } | |
| [dir] .card-button-add { | |
| margin-top: -16px; | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: transparent; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .card-button-add { | |
| left: calc((50% - 28px) / 2); | |
| margin-left: -16px; | |
| padding-left: 32px; | |
| padding-right: 32px; | |
| padding-left: 0; | |
| padding-right: 0; } | |
| [dir=rtl] .card-button-add { | |
| right: calc((50% - 28px) / 2); | |
| margin-right: -16px; | |
| padding-right: 32px; | |
| padding-left: 32px; | |
| padding-right: 0; | |
| padding-left: 0; } | |
| [dir] .card-button-add .b-alt-text { | |
| margin-top: -30px; } | |
| .card-button-add.contextmenu-active, .card-button-add:not(:disabled):hover { | |
| color: #ffffff; } | |
| [dir] .card-button-add.contextmenu-active, [dir] .card-button-add:not(:disabled):hover { | |
| background-color: transparent; } | |
| .card-button-add:not(:disabled):hover:active { | |
| color: #a0a0a0; } | |
| [dir] .card-button-add:not(:disabled):hover:active { | |
| background: transparent; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card-button-add:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card-button-add { | |
| transition-duration: 50ms; } } | |
| .card-button-add::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .card-button-add::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .card-button-add.contextmenu-active, [dir] .card-button-add:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card-button-add.contextmenu-active, [dir] .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); } | |
| [dir] .card-button-add.contextmenu-active::after, [dir] .card-button-add:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card-button-add.contextmenu-active::after, [dir] .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; | |
| line-height: 32px; | |
| font-size: 16px; | |
| width: calc(100% - 8px); } | |
| [dir] .card-button-add::before { | |
| border-radius: 500px; } | |
| [dir=ltr] .card-button-add::before { | |
| left: 0; | |
| right: 0; | |
| text-align: left; | |
| padding-left: 8px; } | |
| [dir=rtl] .card-button-add::before { | |
| right: 0; | |
| left: 0; | |
| text-align: right; | |
| padding-right: 8px; } | |
| .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; } | |
| [dir] .card-button-add.button-play.playing:not(:hover), [dir] .tl-row.playing .card-button-add.button-play:not(:hover), [dir] .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; } | |
| [dir] .card-button-add.button-play.playing:not(:hover)::after, [dir] .tl-row.playing .card-button-add.button-play:not(:hover)::after, [dir] .card.playing .card-button-add.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .card-button-add.button-play.playing:not(:hover)::after, [dir=ltr] .tl-row.playing .card-button-add.button-play:not(:hover)::after, [dir=ltr] .card.playing .card-button-add.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .card-button-add.button-play.playing:not(:hover)::after, [dir=rtl] .tl-row.playing .card-button-add.button-play:not(:hover)::after, [dir=rtl] .card.playing .card-button-add.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .card-button-add.button-play.playing:not(:hover).contextmenu-active, [dir] .card-button-add.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .card-button-add.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .card-button-add.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .card-button-add.button-play.playing:not(:hover).contextmenu-active::after, [dir] .card-button-add.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .card-button-add.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .card-button-add.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .card-button-add.button-play.playing:not(:hover).contextmenu-active, [dir] .card-button-add.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .card-button-add.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .card-button-add.button-play:not(:hover).contextmenu-active, [dir] .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .card-button-add.button-play.playing:not(:hover).contextmenu-active::after, [dir] .card-button-add.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .card-button-add.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .card-button-add.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .card-button-add.button-play.playing:not(:hover):not(:disabled):hover:active, [dir] .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing .card-button-add.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .card-button-add.button-play.playing:not(:hover):not(:disabled):hover:active::after, [dir] .tl-row.playing .card-button-add.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir] .tl-row.playing.card-button-add.button-play:not(:hover), [dir] .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; } | |
| [dir] .tl-row.playing.card-button-add.button-play:not(:hover)::after, [dir] .card.playing.card-button-add.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .tl-row.playing.card-button-add.button-play:not(:hover)::after, [dir=ltr] .card.playing.card-button-add.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row.playing.card-button-add.button-play:not(:hover)::after, [dir=rtl] .card.playing.card-button-add.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row.playing.card-button-add.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.card-button-add.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .tl-row.playing.card-button-add.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.card-button-add.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .tl-row.playing.card-button-add.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.card-button-add.button-play:not(:hover).contextmenu-active, [dir] .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.card-button-add.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.card-button-add.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.card-button-add.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .card.playing.card-button-add.button-play:not(:hover):not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| .tl-row.playing.card-button-add.button-play:not(:hover)::before, | |
| .card.playing.card-button-add.button-play:not(:hover)::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f15e"; | |
| font-size: 16px; | |
| line-height: 32px; } | |
| .tl-row.playing.card-button-add.button-play:hover::before, | |
| .card.playing.card-button-add.button-play:hover::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f130"; | |
| font-size: 16px; | |
| line-height: 32px; } | |
| .card-button-add.active { | |
| color: #1ed760; } | |
| .card-button-add.active.contextmenu-active, .card-button-add.active:not(:disabled):hover { | |
| color: #1df369; } | |
| .card-button-add.active:not(:disabled):hover:active { | |
| color: #18ac4d; } | |
| .card-button-add.drop-target-active { | |
| color: #4c3337; } | |
| [dir] .card-button-add.drop-target-active { | |
| background-color: #ffffff; } | |
| .card-button-add.drop-target-active.contextmenu-active, .card-button-add.drop-target-active:not(:disabled):hover { | |
| color: #4c3337; } | |
| .card-button-add.drop-target-active:not(:disabled):hover:active { | |
| color: black; } | |
| [dir] .card-button-add.drop-target-active.contextmenu-active, [dir] .card-button-add.drop-target-active:not(:disabled):hover { | |
| background-color: #ffffff; } | |
| .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; } | |
| .nft-enabled .card-button-add::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f3DB"; | |
| font-size: 24px; | |
| line-height: inherit; } | |
| .card .card-button-play { | |
| height: 56px; | |
| line-height: 54px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| width: 56px; } | |
| [dir] .card .card-button-play { | |
| padding-top: 1px; | |
| border-radius: 28px; | |
| background: rgba(24, 24, 24, 0.7); | |
| transition-property: transform, box-shadow, color, background-color; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .card .card-button-play { | |
| left: 50%; | |
| margin: -28px 0 0 -28px; | |
| padding-left: 56px; | |
| padding-right: 56px; | |
| padding-left: 0; | |
| padding-right: 0; } | |
| [dir=rtl] .card .card-button-play { | |
| right: 50%; | |
| margin: -28px -28px 0 0; | |
| padding-right: 56px; | |
| padding-left: 56px; | |
| padding-right: 0; | |
| padding-left: 0; } | |
| [dir] .card .card-button-play .b-alt-text { | |
| margin-top: -54px; } | |
| [dir] .card .card-button-play.contextmenu-active, [dir] .card .card-button-play:not(:disabled):hover { | |
| background-color: rgba(24, 24, 24, 0.7); } | |
| .card .card-button-play:not(:disabled):hover:active { | |
| color: #a0a0a0; } | |
| [dir] .card .card-button-play:not(:disabled):hover:active { | |
| background: rgba(24, 24, 24, 0.7); | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card .card-button-play:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card .card-button-play { | |
| transition-duration: 50ms; } } | |
| .card .card-button-play::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .card .card-button-play::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .card .card-button-play.contextmenu-active, [dir] .card .card-button-play:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card .card-button-play.contextmenu-active, [dir] .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); } | |
| [dir] .card .card-button-play.contextmenu-active::after, [dir] .card .card-button-play:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card .card-button-play.contextmenu-active::after, [dir] .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; } | |
| [dir] .card .card-button-play::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .card .card-button-play::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .card .card-button-play::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .card .card-button-play.contextmenu-active, [dir] .card .card-button-play:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent; } | |
| [dir] .card .card-button-play.contextmenu-active::after, [dir] .card .card-button-play:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card .card-button-play.contextmenu-active, [dir] .card .card-button-play:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| [dir] .card .card-button-play.contextmenu-active::after, [dir] .card .card-button-play:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } } | |
| [dir] .card .card-button-play:not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .card .card-button-play:not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .card .card-button-play.contextmenu-active, [dir] .card .card-button-play:not(:disabled):hover { | |
| transform: scale(1.07143); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card .card-button-play.contextmenu-active, [dir] .card .card-button-play:not(:disabled):hover { | |
| transform: scale(1.07143); } } | |
| .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; | |
| line-height: 56px; | |
| font-size: 28px; | |
| width: calc(100% - 14px); } | |
| [dir] .card .card-button-play::before { | |
| border-radius: 500px; } | |
| [dir=ltr] .card .card-button-play::before { | |
| left: 0; | |
| right: 0; | |
| text-align: left; | |
| padding-left: 14px; } | |
| [dir=rtl] .card .card-button-play::before { | |
| right: 0; | |
| left: 0; | |
| text-align: right; | |
| padding-right: 14px; } | |
| .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; } | |
| [dir] .card .card-button-play.button-play.playing:not(:hover), [dir] .tl-row.playing .card .card-button-play.button-play:not(:hover), [dir] .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; } | |
| [dir] .card .card-button-play.button-play.playing:not(:hover)::after, [dir] .tl-row.playing .card .card-button-play.button-play:not(:hover)::after, [dir] .card.playing .card .card-button-play.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .card .card-button-play.button-play.playing:not(:hover)::after, [dir=ltr] .tl-row.playing .card .card-button-play.button-play:not(:hover)::after, [dir=ltr] .card.playing .card .card-button-play.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .card .card-button-play.button-play.playing:not(:hover)::after, [dir=rtl] .tl-row.playing .card .card-button-play.button-play:not(:hover)::after, [dir=rtl] .card.playing .card .card-button-play.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .card .card-button-play.button-play.playing:not(:hover).contextmenu-active, [dir] .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .card .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .card .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .card .card-button-play.button-play.playing:not(:hover).contextmenu-active::after, [dir] .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .card .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .card .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .card .card-button-play.button-play.playing:not(:hover).contextmenu-active, [dir] .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .card .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .card .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .card .card-button-play.button-play.playing:not(:hover).contextmenu-active::after, [dir] .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .card .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .card .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover:active, [dir] .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .card .card-button-play.button-play.playing:not(:hover):not(:disabled):hover:active::after, [dir] .tl-row.playing .card .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir] .tl-row.playing.card .card-button-play.button-play:not(:hover), [dir] .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; } | |
| [dir] .tl-row.playing.card .card-button-play.button-play:not(:hover)::after, [dir] .card.playing.card .card-button-play.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .tl-row.playing.card .card-button-play.button-play:not(:hover)::after, [dir=ltr] .card.playing.card .card-button-play.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row.playing.card .card-button-play.button-play:not(:hover)::after, [dir=rtl] .card.playing.card .card-button-play.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row.playing.card .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.card .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .tl-row.playing.card .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.card .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .tl-row.playing.card .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.card .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.card .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.card .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.card .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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"; } | |
| [dir] .card .card-button-play:hover { | |
| background: rgba(0, 0, 0, 0.75) !important; | |
| border-color: #ffffff; } | |
| .card .card-button-play:active { | |
| color: #999999; } | |
| [dir] .card .card-button-play:active { | |
| background: rgba(0, 0, 0, 0.75) !important; | |
| border-color: #999999; } | |
| .card-type-user .card-overlay, | |
| .card-type-user .card-button-play { | |
| display: none; } | |
| .card-button-more { | |
| top: 50%; | |
| height: 32px; | |
| line-height: 30px; | |
| color: #b3b3b3; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| width: 32px; | |
| color: #ffffff; } | |
| [dir] .card-button-more { | |
| margin-top: -16px; | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: transparent; | |
| transition-property: transform, box-shadow, color, background-color; } | |
| [dir=ltr] .card-button-more { | |
| right: calc((50% - 28px) / 2); | |
| margin-right: -16px; | |
| padding-left: 32px; | |
| padding-right: 32px; | |
| padding-left: 0; | |
| padding-right: 0; } | |
| [dir=rtl] .card-button-more { | |
| left: calc((50% - 28px) / 2); | |
| margin-left: -16px; | |
| padding-right: 32px; | |
| padding-left: 32px; | |
| padding-right: 0; | |
| padding-left: 0; } | |
| [dir] .card-button-more .b-alt-text { | |
| margin-top: -30px; } | |
| .card-button-more.contextmenu-active, .card-button-more:not(:disabled):hover { | |
| color: #ffffff; } | |
| [dir] .card-button-more.contextmenu-active, [dir] .card-button-more:not(:disabled):hover { | |
| background-color: transparent; } | |
| .card-button-more:not(:disabled):hover:active { | |
| color: #a0a0a0; } | |
| [dir] .card-button-more:not(:disabled):hover:active { | |
| background: transparent; | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card-button-more:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card-button-more { | |
| transition-duration: 50ms; } } | |
| .card-button-more::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .card-button-more::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .card-button-more.contextmenu-active, [dir] .card-button-more:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card-button-more.contextmenu-active, [dir] .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); } | |
| [dir] .card-button-more.contextmenu-active::after, [dir] .card-button-more:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card-button-more.contextmenu-active::after, [dir] .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; | |
| line-height: 32px; | |
| font-size: 16px; | |
| width: calc(100% - 8px); } | |
| [dir] .card-button-more::before { | |
| border-radius: 500px; } | |
| [dir=ltr] .card-button-more::before { | |
| left: 0; | |
| right: 0; | |
| text-align: left; | |
| padding-left: 8px; } | |
| [dir=rtl] .card-button-more::before { | |
| right: 0; | |
| left: 0; | |
| text-align: right; | |
| padding-right: 8px; } | |
| .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; } | |
| [dir] .card-button-more.button-play.playing:not(:hover), [dir] .tl-row.playing .card-button-more.button-play:not(:hover), [dir] .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; } | |
| [dir] .card-button-more.button-play.playing:not(:hover)::after, [dir] .tl-row.playing .card-button-more.button-play:not(:hover)::after, [dir] .card.playing .card-button-more.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .card-button-more.button-play.playing:not(:hover)::after, [dir=ltr] .tl-row.playing .card-button-more.button-play:not(:hover)::after, [dir=ltr] .card.playing .card-button-more.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .card-button-more.button-play.playing:not(:hover)::after, [dir=rtl] .tl-row.playing .card-button-more.button-play:not(:hover)::after, [dir=rtl] .card.playing .card-button-more.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .card-button-more.button-play.playing:not(:hover).contextmenu-active, [dir] .card-button-more.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .card-button-more.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .card-button-more.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .card-button-more.button-play.playing:not(:hover).contextmenu-active::after, [dir] .card-button-more.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .card-button-more.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .card-button-more.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .card-button-more.button-play.playing:not(:hover).contextmenu-active, [dir] .card-button-more.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .card-button-more.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .card-button-more.button-play:not(:hover).contextmenu-active, [dir] .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .card-button-more.button-play.playing:not(:hover).contextmenu-active::after, [dir] .card-button-more.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .card-button-more.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .card-button-more.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .card-button-more.button-play.playing:not(:hover):not(:disabled):hover:active, [dir] .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing .card-button-more.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .card-button-more.button-play.playing:not(:hover):not(:disabled):hover:active::after, [dir] .tl-row.playing .card-button-more.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir] .tl-row.playing.card-button-more.button-play:not(:hover), [dir] .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; } | |
| [dir] .tl-row.playing.card-button-more.button-play:not(:hover)::after, [dir] .card.playing.card-button-more.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .tl-row.playing.card-button-more.button-play:not(:hover)::after, [dir=ltr] .card.playing.card-button-more.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row.playing.card-button-more.button-play:not(:hover)::after, [dir=rtl] .card.playing.card-button-more.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row.playing.card-button-more.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.card-button-more.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .tl-row.playing.card-button-more.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.card-button-more.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .tl-row.playing.card-button-more.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.card-button-more.button-play:not(:hover).contextmenu-active, [dir] .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.card-button-more.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.card-button-more.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.card-button-more.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .card.playing.card-button-more.button-play:not(:hover):not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| .tl-row.playing.card-button-more.button-play:not(:hover)::before, | |
| .card.playing.card-button-more.button-play:not(:hover)::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f15e"; | |
| font-size: 16px; | |
| line-height: 32px; } | |
| .tl-row.playing.card-button-more.button-play:hover::before, | |
| .card.playing.card-button-more.button-play:hover::before { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| content: "\f130"; | |
| font-size: 16px; | |
| line-height: 32px; } | |
| .card-button-more.active { | |
| color: #1ed760; } | |
| .card-button-more.active.contextmenu-active, .card-button-more.active:not(:disabled):hover { | |
| color: #1df369; } | |
| .card-button-more.active:not(:disabled):hover:active { | |
| color: #18ac4d; } | |
| .card-button-more.drop-target-active { | |
| color: #4c3337; } | |
| [dir] .card-button-more.drop-target-active { | |
| background-color: #ffffff; } | |
| .card-button-more.drop-target-active.contextmenu-active, .card-button-more.drop-target-active:not(:disabled):hover { | |
| color: #4c3337; } | |
| .card-button-more.drop-target-active:not(:disabled):hover:active { | |
| color: black; } | |
| [dir] .card-button-more.drop-target-active.contextmenu-active, [dir] .card-button-more.drop-target-active:not(:disabled):hover { | |
| background-color: #ffffff; } | |
| .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; } | |
| .nft-enabled .card.added .card-button-add::before { | |
| content: "\f3DC" !important; | |
| color: #ffffff; } | |
| .nft-enabled: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); } | |
| [dir] .card { | |
| transition-property: transform, opacity; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card { | |
| transition-duration: 50ms; } } | |
| .card .card-info-wrapper, | |
| .card .card-image-wrapper { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .card .card-info-wrapper, [dir] .card .card-image-wrapper { | |
| transition-property: transform, opacity; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card .card-info-wrapper, [dir] .card .card-image-wrapper { | |
| transition-duration: 50ms; } } | |
| .card.pressed { | |
| transition: none; } | |
| [dir] .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; } | |
| [dir=ltr] .card a .card-hit-area-counter-scale, [dir=ltr] .card a .card-hit-area-counter-scale-left, [dir=ltr] .card a .card-hit-area-counter-scale-right { | |
| left: 0; | |
| right: 0; } | |
| [dir=rtl] .card a .card-hit-area-counter-scale, [dir=rtl] .card a .card-hit-area-counter-scale-left, [dir=rtl] .card a .card-hit-area-counter-scale-right { | |
| right: 0; | |
| left: 0; } | |
| [dir] .card.pressed a .card-hit-area-counter-scale { | |
| transform: scale(1.5); } | |
| [dir] .card.pressed a .card-hit-area-counter-scale-left { | |
| transform: scale(1.5); } | |
| [dir=ltr] .card.pressed a .card-hit-area-counter-scale-left { | |
| transform-origin: right; } | |
| [dir=rtl] .card.pressed a .card-hit-area-counter-scale-left { | |
| transform-origin: left; } | |
| [dir] .card.pressed a .card-hit-area-counter-scale-right { | |
| transform: scale(1.5); } | |
| [dir=ltr] .card.pressed a .card-hit-area-counter-scale-right { | |
| transform-origin: left; } | |
| [dir=rtl] .card.pressed a .card-hit-area-counter-scale-right { | |
| transform-origin: right; } | |
| .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: #614348; } | |
| .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; } | |
| [dir] .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: 74px; } | |
| .card-info-wrapper.card-info-with-description.card-info-with-metadata { | |
| height: 139px; } | |
| .card-info-wrapper.card-info-with-subtitle-links.card-info-with-metadata { | |
| height: 94px; } | |
| [dir] .card-type-artist:not(.card-horizontal) .card-info-wrapper, [dir] .card-type-collection-artist:not(.card-horizontal) .card-info-wrapper, [dir] .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: 400; | |
| color: #ffffff; | |
| text-transform: none; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow-wrap: break-word; } | |
| [dir] .card-info-title { | |
| padding-bottom: 3px; } | |
| .card-info-title a { | |
| color: #ffffff; } | |
| .card-info-title a:hover:active { | |
| color: #b3b3b3; } | |
| .card-info-subtitle-links { | |
| font-size: 14px; | |
| line-height: 20px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: none; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| color: #b3b3b3; } | |
| [dir] .card-info-subtitle-links { | |
| padding-bottom: 3px; | |
| margin-bottom: -3px; } | |
| .card-info-subtitle-links a { | |
| color: #b3b3b3; } | |
| .card-info-subtitle-links a:hover { | |
| color: #ffffff; } | |
| .card-info-subtitle-metadata { | |
| font-size: 11px; | |
| line-height: 16px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow-wrap: break-word; | |
| color: #b3b3b3; } | |
| [dir] .card-info-subtitle-metadata { | |
| margin-top: 4px; } | |
| .card-info-subtitle-metadata .card-info-subtitle-new-mark { | |
| display: inline-block; } | |
| [dir=ltr] .card-info-subtitle-metadata .card-info-subtitle-new-mark { | |
| padding-right: 4px; } | |
| [dir=rtl] .card-info-subtitle-metadata .card-info-subtitle-new-mark { | |
| padding-left: 4px; } | |
| .card-info-subtitle-metadata .card-info-subtitle-new-mark::before { | |
| content: ''; | |
| display: inline-block; | |
| height: 8px; | |
| width: 8px; | |
| line-height: 8px; } | |
| [dir] .card-info-subtitle-metadata .card-info-subtitle-new-mark::before { | |
| background-color: #4687d6; | |
| border-radius: 8px; } | |
| .card-info-subtitle-description { | |
| font-size: 14px; | |
| line-height: 20px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: none; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow-wrap: break-word; | |
| color: #b3b3b3; } | |
| [dir] .card-info-subtitle-description { | |
| margin-bottom: 5px; } | |
| .card.playing .card-info-title, | |
| .card.paused .card-info-title, | |
| .playing .card .card-info-title, | |
| .paused .card .card-info-title { | |
| color: #1db954; } | |
| .card.playing .card-info-title a, | |
| .card.paused .card-info-title a, | |
| .playing .card .card-info-title a, | |
| .paused .card .card-info-title a { | |
| color: #1db954; } | |
| .card.playing .card-info-title a:hover, | |
| .card.paused .card-info-title a:hover, | |
| .playing .card .card-info-title a:hover, | |
| .paused .card .card-info-title a:hover { | |
| color: #1ed760; } | |
| .card.playing .card-button-play, | |
| .playing .card .card-button-play { | |
| visibility: visible; } | |
| .card-type-station:not(.card-type-station-cluster) .card-station-layer { | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; } | |
| [dir] .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); } | |
| [dir] .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; } | |
| [dir] .card-type-station:not(.card-type-station-cluster) .card-station-mask { | |
| background-image: url("https://d2j0f09xqmv212.cloudfront.net/images/station-wave.svg"); } | |
| .card-type-station:not(.card-type-station-cluster) .card-station-overlay { | |
| position: absolute; } | |
| [dir] .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%; } | |
| [dir=ltr] .card-type-station:not(.card-type-station-cluster) .card-station-overlay { | |
| left: 26.77%; } | |
| [dir=rtl] .card-type-station:not(.card-type-station-cluster) .card-station-overlay { | |
| right: 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%; } | |
| [dir] .card-type-station:not(.card-type-station-cluster).card-type-station-artist .card-station-overlay { | |
| border-radius: 500px; } | |
| [dir=ltr] .card-type-station:not(.card-type-station-cluster).card-type-station-artist .card-station-overlay { | |
| left: 24.24%; } | |
| [dir=rtl] .card-type-station:not(.card-type-station-cluster).card-type-station-artist .card-station-overlay { | |
| right: 24.24%; } | |
| [dir] .card-video .card-image-wrapper { | |
| padding-bottom: 56.25%; } | |
| .card-horizontal { | |
| position: relative; } | |
| .card-horizontal > .card-horizontal-interior-wrapper { | |
| position: relative; } | |
| [dir] .card-horizontal > .card-horizontal-interior-wrapper { | |
| border: 0; } | |
| [dir] .card-horizontal > .card-horizontal-interior-wrapper:hover, [dir] .card-horizontal > .card-horizontal-interior-wrapper:active { | |
| background-color: #614348; } | |
| [dir] .card-horizontal.pressed > .card-horizontal-interior-wrapper, [dir] .card-horizontal.contextmenu-active > .card-horizontal-interior-wrapper { | |
| background-color: #614348; } | |
| .card-horizontal .card-image-wrapper { | |
| width: 96px; | |
| height: 96px; } | |
| [dir] .card-horizontal .card-image-wrapper { | |
| padding-bottom: 0; } | |
| [dir=ltr] .card-horizontal .card-image-wrapper { | |
| float: left; } | |
| [dir=rtl] .card-horizontal .card-image-wrapper { | |
| float: right; } | |
| .card-horizontal.card-video .card-image-wrapper { | |
| width: 170.66667px; } | |
| .card-horizontal .card-info-wrapper { | |
| height: 96px; | |
| position: relative; } | |
| [dir] .card-horizontal .card-info-wrapper { | |
| padding: 0; } | |
| [dir=ltr] .card-horizontal .card-info-wrapper { | |
| margin-left: 96px; } | |
| [dir=rtl] .card-horizontal .card-info-wrapper { | |
| margin-right: 96px; } | |
| [dir] .card-horizontal .card-info-wrapper > a { | |
| border: none; } | |
| .card-horizontal .card-info-content-wrapper { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| height: 96px; } | |
| [dir=ltr] .card-horizontal .card-info-content-wrapper { | |
| padding-left: 16px; | |
| padding-right: 16px; } | |
| [dir=rtl] .card-horizontal .card-info-content-wrapper { | |
| padding-right: 16px; | |
| padding-left: 16px; } | |
| [dir=ltr] .card-horizontal.card-hidden-image .card-info-wrapper { | |
| margin-left: 0; } | |
| [dir=rtl] .card-horizontal.card-hidden-image .card-info-wrapper { | |
| margin-right: 0; } | |
| [dir=ltr] .card-horizontal.card-hidden-image .card-info-wrapper .card-info-content-wrapper { | |
| padding-left: 0; } | |
| [dir=rtl] .card-horizontal.card-hidden-image .card-info-wrapper .card-info-content-wrapper { | |
| padding-right: 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: 400; | |
| color: #ffffff; | |
| text-transform: none; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| display: block; } | |
| [dir] .card-horizontal.card-type-artist .card-image-link, [dir] .card-horizontal.card-type-artist .card-hit-area-counter-scale, [dir] .card-horizontal.card-type-collection-artist .card-image-link, [dir] .card-horizontal.card-type-collection-artist .card-hit-area-counter-scale, [dir] .card-horizontal.card-type-user .card-image-link, [dir] .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; } | |
| [dir] .card-horizontal.card-type-artist .card-image-hit-area, [dir] .card-horizontal.card-type-collection-artist .card-image-hit-area, [dir] .card-horizontal.card-type-user .card-image-hit-area { | |
| border-radius: 0; } | |
| [dir=ltr] .card-horizontal.card-type-artist .card-image-hit-area, [dir=ltr] .card-horizontal.card-type-collection-artist .card-image-hit-area, [dir=ltr] .card-horizontal.card-type-user .card-image-hit-area { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .card-horizontal.card-type-artist .card-image-hit-area, [dir=rtl] .card-horizontal.card-type-collection-artist .card-image-hit-area, [dir=rtl] .card-horizontal.card-type-user .card-image-hit-area { | |
| left: 0; | |
| right: 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; } | |
| [dir=ltr] .card-horizontal.card-type-artist .card-image, [dir=ltr] .card-horizontal.card-type-artist .card-placeholder-wrapper, [dir=ltr] .card-horizontal.card-type-artist .card-overlay, [dir=ltr] .card-horizontal.card-type-collection-artist .card-image, [dir=ltr] .card-horizontal.card-type-collection-artist .card-placeholder-wrapper, [dir=ltr] .card-horizontal.card-type-collection-artist .card-overlay, [dir=ltr] .card-horizontal.card-type-user .card-image, [dir=ltr] .card-horizontal.card-type-user .card-placeholder-wrapper, [dir=ltr] .card-horizontal.card-type-user .card-overlay { | |
| right: 8px; | |
| left: 8px; } | |
| [dir=rtl] .card-horizontal.card-type-artist .card-image, [dir=rtl] .card-horizontal.card-type-artist .card-placeholder-wrapper, [dir=rtl] .card-horizontal.card-type-artist .card-overlay, [dir=rtl] .card-horizontal.card-type-collection-artist .card-image, [dir=rtl] .card-horizontal.card-type-collection-artist .card-placeholder-wrapper, [dir=rtl] .card-horizontal.card-type-collection-artist .card-overlay, [dir=rtl] .card-horizontal.card-type-user .card-image, [dir=rtl] .card-horizontal.card-type-user .card-placeholder-wrapper, [dir=rtl] .card-horizontal.card-type-user .card-overlay { | |
| left: 8px; | |
| right: 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; } | |
| [dir=ltr] .card-horizontal-size-small .card-info-wrapper { | |
| margin-left: 50px; } | |
| [dir=rtl] .card-horizontal-size-small .card-info-wrapper { | |
| margin-right: 50px; } | |
| .card-horizontal-size-small .card-info-wrapper .card-info-content-wrapper { | |
| height: 50px; } | |
| [dir=ltr] .card-horizontal-size-small .card-info-wrapper .card-info-content-wrapper { | |
| padding-left: 12px; | |
| padding-right: 12px; } | |
| [dir=rtl] .card-horizontal-size-small .card-info-wrapper .card-info-content-wrapper { | |
| padding-right: 12px; | |
| padding-left: 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; } | |
| [dir=ltr] .card-horizontal-size-small.card-type-artist .card-image, [dir=ltr] .card-horizontal-size-small.card-type-artist .card-placeholder-wrapper, [dir=ltr] .card-horizontal-size-small.card-type-artist .card-overlay, [dir=ltr] .card-horizontal-size-small.card-type-collection-artist .card-image, [dir=ltr] .card-horizontal-size-small.card-type-collection-artist .card-placeholder-wrapper, [dir=ltr] .card-horizontal-size-small.card-type-collection-artist .card-overlay, [dir=ltr] .card-horizontal-size-small.card-type-user .card-image, [dir=ltr] .card-horizontal-size-small.card-type-user .card-placeholder-wrapper, [dir=ltr] .card-horizontal-size-small.card-type-user .card-overlay { | |
| right: 3px; | |
| left: 3px; } | |
| [dir=rtl] .card-horizontal-size-small.card-type-artist .card-image, [dir=rtl] .card-horizontal-size-small.card-type-artist .card-placeholder-wrapper, [dir=rtl] .card-horizontal-size-small.card-type-artist .card-overlay, [dir=rtl] .card-horizontal-size-small.card-type-collection-artist .card-image, [dir=rtl] .card-horizontal-size-small.card-type-collection-artist .card-placeholder-wrapper, [dir=rtl] .card-horizontal-size-small.card-type-collection-artist .card-overlay, [dir=rtl] .card-horizontal-size-small.card-type-user .card-image, [dir=rtl] .card-horizontal-size-small.card-type-user .card-placeholder-wrapper, [dir=rtl] .card-horizontal-size-small.card-type-user .card-overlay { | |
| left: 3px; | |
| right: 3px; } | |
| .card-horizontal-size-small.card-video .card-image-wrapper { | |
| width: 50px; } | |
| .card-horizontal-size-medium .card-button-play { | |
| height: 32px; | |
| line-height: 30px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| width: 32px; } | |
| [dir] .card-horizontal-size-medium .card-button-play { | |
| padding-top: 1px; | |
| border-radius: 16px; | |
| background: rgba(24, 24, 24, 0.7); | |
| transition-property: transform, box-shadow, color, background-color; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .card-horizontal-size-medium .card-button-play { | |
| padding-left: 32px; | |
| padding-right: 32px; | |
| padding-left: 0; | |
| padding-right: 0; | |
| margin: -16px 0 0 -16px; } | |
| [dir=rtl] .card-horizontal-size-medium .card-button-play { | |
| padding-right: 32px; | |
| padding-left: 32px; | |
| padding-right: 0; | |
| padding-left: 0; | |
| margin: -16px -16px 0 0; } | |
| [dir] .card-horizontal-size-medium .card-button-play .b-alt-text { | |
| margin-top: -30px; } | |
| [dir] .card-horizontal-size-medium .card-button-play.contextmenu-active, [dir] .card-horizontal-size-medium .card-button-play:not(:disabled):hover { | |
| background-color: rgba(24, 24, 24, 0.7); } | |
| .card-horizontal-size-medium .card-button-play:not(:disabled):hover:active { | |
| color: #a0a0a0; } | |
| [dir] .card-horizontal-size-medium .card-button-play:not(:disabled):hover:active { | |
| background: rgba(24, 24, 24, 0.7); | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card-horizontal-size-medium .card-button-play:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .card-horizontal-size-medium .card-button-play::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .card-horizontal-size-medium .card-button-play.contextmenu-active, [dir] .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) { | |
| [dir] .card-horizontal-size-medium .card-button-play.contextmenu-active, [dir] .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); } | |
| [dir] .card-horizontal-size-medium .card-button-play.contextmenu-active::after, [dir] .card-horizontal-size-medium .card-button-play:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card-horizontal-size-medium .card-button-play.contextmenu-active::after, [dir] .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; } | |
| [dir] .card-horizontal-size-medium .card-button-play::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .card-horizontal-size-medium .card-button-play::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .card-horizontal-size-medium .card-button-play::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .card-horizontal-size-medium .card-button-play.contextmenu-active, [dir] .card-horizontal-size-medium .card-button-play:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent; } | |
| [dir] .card-horizontal-size-medium .card-button-play.contextmenu-active::after, [dir] .card-horizontal-size-medium .card-button-play:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card-horizontal-size-medium .card-button-play.contextmenu-active, [dir] .card-horizontal-size-medium .card-button-play:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| [dir] .card-horizontal-size-medium .card-button-play.contextmenu-active::after, [dir] .card-horizontal-size-medium .card-button-play:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } } | |
| [dir] .card-horizontal-size-medium .card-button-play:not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .card-horizontal-size-medium .card-button-play:not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .card-horizontal-size-medium .card-button-play.contextmenu-active, [dir] .card-horizontal-size-medium .card-button-play:not(:disabled):hover { | |
| transform: scale(1.0625); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .card-horizontal-size-medium .card-button-play.contextmenu-active, [dir] .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; | |
| line-height: 32px; | |
| font-size: 16px; | |
| width: calc(100% - 8px); } | |
| [dir] .card-horizontal-size-medium .card-button-play::before { | |
| border-radius: 500px; } | |
| [dir=ltr] .card-horizontal-size-medium .card-button-play::before { | |
| left: 0; | |
| right: 0; | |
| text-align: left; | |
| padding-left: 8px; } | |
| [dir=rtl] .card-horizontal-size-medium .card-button-play::before { | |
| right: 0; | |
| left: 0; | |
| text-align: right; | |
| padding-right: 8px; } | |
| .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; } | |
| [dir] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover), [dir] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover), [dir] .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; } | |
| [dir] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover)::after, [dir] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, [dir] .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; } | |
| [dir=ltr] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover)::after, [dir=ltr] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, [dir=ltr] .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover)::after, [dir=rtl] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, [dir=rtl] .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover).contextmenu-active, [dir] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover).contextmenu-active::after, [dir] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover).contextmenu-active, [dir] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover).contextmenu-active::after, [dir] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .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; } } | |
| [dir] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover:active, [dir] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active, [dir] .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; } | |
| [dir] .card-horizontal-size-medium .card-button-play.button-play.playing:not(:hover):not(:disabled):hover:active::after, [dir] .tl-row.playing .card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover), [dir] .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; } | |
| [dir] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, [dir] .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; } | |
| [dir=ltr] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, [dir=ltr] .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after, [dir=rtl] .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active, [dir] .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover).contextmenu-active::after, [dir] .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; } } | |
| [dir] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active, [dir] .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; } | |
| [dir] .tl-row.playing.card-horizontal-size-medium .card-button-play.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir=ltr] .card-horizontal-size-medium .card-info-wrapper { | |
| margin-left: 64px; } | |
| [dir=rtl] .card-horizontal-size-medium .card-info-wrapper { | |
| margin-right: 64px; } | |
| .card-horizontal-size-medium .card-info-wrapper .card-info-content-wrapper { | |
| height: 64px; } | |
| [dir=ltr] .card-horizontal-size-medium .card-info-wrapper .card-info-content-wrapper { | |
| padding-left: 16px; | |
| padding-right: 16px; } | |
| [dir=rtl] .card-horizontal-size-medium .card-info-wrapper .card-info-content-wrapper { | |
| padding-right: 16px; | |
| padding-left: 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; } | |
| [dir=ltr] .card-horizontal-size-medium.card-type-artist .card-image, [dir=ltr] .card-horizontal-size-medium.card-type-artist .card-placeholder-wrapper, [dir=ltr] .card-horizontal-size-medium.card-type-artist .card-overlay, [dir=ltr] .card-horizontal-size-medium.card-type-collection-artist .card-image, [dir=ltr] .card-horizontal-size-medium.card-type-collection-artist .card-placeholder-wrapper, [dir=ltr] .card-horizontal-size-medium.card-type-collection-artist .card-overlay, [dir=ltr] .card-horizontal-size-medium.card-type-user .card-image, [dir=ltr] .card-horizontal-size-medium.card-type-user .card-placeholder-wrapper, [dir=ltr] .card-horizontal-size-medium.card-type-user .card-overlay { | |
| right: 5px; | |
| left: 5px; } | |
| [dir=rtl] .card-horizontal-size-medium.card-type-artist .card-image, [dir=rtl] .card-horizontal-size-medium.card-type-artist .card-placeholder-wrapper, [dir=rtl] .card-horizontal-size-medium.card-type-artist .card-overlay, [dir=rtl] .card-horizontal-size-medium.card-type-collection-artist .card-image, [dir=rtl] .card-horizontal-size-medium.card-type-collection-artist .card-placeholder-wrapper, [dir=rtl] .card-horizontal-size-medium.card-type-collection-artist .card-overlay, [dir=rtl] .card-horizontal-size-medium.card-type-user .card-image, [dir=rtl] .card-horizontal-size-medium.card-type-user .card-placeholder-wrapper, [dir=rtl] .card-horizontal-size-medium.card-type-user .card-overlay { | |
| left: 5px; | |
| right: 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; } | |
| [dir=ltr] .card__remove-button { | |
| margin-right: 4px; } | |
| [dir=rtl] .card__remove-button { | |
| margin-left: 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; } | |
| [dir] .card-puff__image { | |
| background-size: cover; | |
| background-position: 50% 50%; } | |
| [dir=ltr] .card-puff__image { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .card-puff__image { | |
| left: 0; | |
| right: 0; } | |
| .card-puff__images { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; } | |
| [dir=ltr] .card-puff__images { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .card-puff__images { | |
| left: 0; | |
| right: 0; } | |
| .card-puff__card-image { | |
| position: absolute; | |
| height: 100%; } | |
| [dir=ltr] .card-puff__card-image { | |
| box-shadow: 5px 0 30px #4c3337; } | |
| [dir=rtl] .card-puff__card-image { | |
| box-shadow: -5px 0 30px #4c3337; } | |
| [dir=ltr] .card-puff__card-image:nth-child(1) { | |
| right: 0; } | |
| [dir=rtl] .card-puff__card-image:nth-child(1) { | |
| left: 0; } | |
| [dir=ltr] .card-puff__card-image:nth-child(3) { | |
| left: 0; } | |
| [dir=rtl] .card-puff__card-image:nth-child(3) { | |
| right: 0; } | |
| [dir] .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; } | |
| [dir] .card-puff__title-container { | |
| background-color: rgba(0, 0, 0, 0.6); } | |
| [dir=ltr] .card-puff__title-container { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .card-puff__title-container { | |
| left: 0; | |
| right: 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: 400; | |
| line-height: 1.2; | |
| font-size: 2.5vw; } | |
| [dir] .card-puff__title { | |
| margin: 0 10px; | |
| text-align: center; } | |
| .card-puff__subtitle { | |
| font-size: 14px; | |
| line-height: 20px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: none; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow-wrap: break-word; } | |
| .card-puff.pressed { | |
| transition: none; } | |
| .card-puff.pressed .card-puff__image-wrapper, | |
| .card-puff.pressed .card-puff__info-container { | |
| transition: none; | |
| opacity: 0.7; } | |
| /** | |
| * Aspect ration of puffs depends on the width of the client and in what | |
| * grid size the puff is placed. Puffs are meant to be placed in a grid. | |
| * | |
| * There are two cases that we handle: | |
| * - three puffs in a row (.col-sm-4, .col-md-4, etc) | |
| * - two puffs in a row (.col-sm-6, .col-md-6, etc). | |
| **/ | |
| [dir] .card-puff__image-wrapper { | |
| padding-bottom: 40%; } | |
| [dir=ltr] .card-puff__card-image { | |
| padding-right: 40%; } | |
| [dir=rtl] .card-puff__card-image { | |
| padding-left: 40%; } | |
| [dir=ltr] .card-puff__card-image:nth-child(2) { | |
| left: 30%; } | |
| [dir=rtl] .card-puff__card-image:nth-child(2) { | |
| right: 30%; } | |
| [dir] .col-xs-3 .card-puff__image-wrapper, [dir] .col-xs-4 .card-puff__image-wrapper, [dir] .col-xs-6 .card-puff__image-wrapper { | |
| padding-bottom: 50%; } | |
| [dir=ltr] .col-xs-3 .card-puff__card-image, [dir=ltr] .col-xs-4 .card-puff__card-image, [dir=ltr] .col-xs-6 .card-puff__card-image { | |
| padding-right: 50%; } | |
| [dir=rtl] .col-xs-3 .card-puff__card-image, [dir=rtl] .col-xs-4 .card-puff__card-image, [dir=rtl] .col-xs-6 .card-puff__card-image { | |
| padding-left: 50%; } | |
| [dir=ltr] .col-xs-3 .card-puff__card-image:nth-child(2), [dir=ltr] .col-xs-4 .card-puff__card-image:nth-child(2), [dir=ltr] .col-xs-6 .card-puff__card-image:nth-child(2) { | |
| left: 25%; } | |
| [dir=rtl] .col-xs-3 .card-puff__card-image:nth-child(2), [dir=rtl] .col-xs-4 .card-puff__card-image:nth-child(2), [dir=rtl] .col-xs-6 .card-puff__card-image:nth-child(2) { | |
| right: 25%; } | |
| .col-xs-6 .card-puff__title { | |
| font-size: 3vw; } | |
| @media (min-width: 592px) { | |
| [dir] .col-sm-6 .card-puff__image-wrapper { | |
| padding-bottom: 40%; } | |
| [dir=ltr] .col-sm-6 .card-puff__card-image { | |
| padding-right: 40%; } | |
| [dir=rtl] .col-sm-6 .card-puff__card-image { | |
| padding-left: 40%; } | |
| [dir=ltr] .col-sm-6 .card-puff__card-image:nth-child(2) { | |
| left: 30%; } | |
| [dir=rtl] .col-sm-6 .card-puff__card-image:nth-child(2) { | |
| right: 30%; } | |
| .col-sm-6 .card-puff__title { | |
| font-size: 3vw; } } | |
| @media (min-width: 820px) { | |
| [dir] .col-md-3 .card-puff__image-wrapper, [dir] .col-md-4 .card-puff__image-wrapper { | |
| padding-bottom: 40%; } | |
| [dir=ltr] .col-md-3 .card-puff__card-image, [dir=ltr] .col-md-4 .card-puff__card-image { | |
| padding-right: 40%; } | |
| [dir=rtl] .col-md-3 .card-puff__card-image, [dir=rtl] .col-md-4 .card-puff__card-image { | |
| padding-left: 40%; } | |
| [dir=ltr] .col-md-3 .card-puff__card-image:nth-child(2), [dir=ltr] .col-md-4 .card-puff__card-image:nth-child(2) { | |
| left: 30%; } | |
| [dir=rtl] .col-md-3 .card-puff__card-image:nth-child(2), [dir=rtl] .col-md-4 .card-puff__card-image:nth-child(2) { | |
| right: 30%; } | |
| [dir] .col-md-6 .card-puff__image-wrapper { | |
| padding-bottom: 33.33333%; } | |
| [dir=ltr] .col-md-6 .card-puff__card-image { | |
| padding-right: 33.33333%; } | |
| [dir=rtl] .col-md-6 .card-puff__card-image { | |
| padding-left: 33.33333%; } | |
| [dir=ltr] .col-md-6 .card-puff__card-image:nth-child(2) { | |
| left: 33.33333%; } | |
| [dir=rtl] .col-md-6 .card-puff__card-image:nth-child(2) { | |
| right: 33.33333%; } | |
| .col-md-6 .card-puff__title { | |
| font-size: 2.5vw; } } | |
| @media (min-width: 1280px) { | |
| [dir] .col-lg-3 .card-puff__image-wrapper, [dir] .col-lg-4 .card-puff__image-wrapper, [dir] .col-lg-6 .card-puff__image-wrapper { | |
| padding-bottom: 33.33333%; } | |
| [dir=ltr] .col-lg-3 .card-puff__card-image, [dir=ltr] .col-lg-4 .card-puff__card-image, [dir=ltr] .col-lg-6 .card-puff__card-image { | |
| padding-right: 33.33333%; } | |
| [dir=rtl] .col-lg-3 .card-puff__card-image, [dir=rtl] .col-lg-4 .card-puff__card-image, [dir=rtl] .col-lg-6 .card-puff__card-image { | |
| padding-left: 33.33333%; } | |
| [dir=ltr] .col-lg-3 .card-puff__card-image:nth-child(2), [dir=ltr] .col-lg-4 .card-puff__card-image:nth-child(2), [dir=ltr] .col-lg-6 .card-puff__card-image:nth-child(2) { | |
| left: 33.33333%; } | |
| [dir=rtl] .col-lg-3 .card-puff__card-image:nth-child(2), [dir=rtl] .col-lg-4 .card-puff__card-image:nth-child(2), [dir=rtl] .col-lg-6 .card-puff__card-image:nth-child(2) { | |
| right: 33.33333%; } | |
| .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 */ } | |
| [dir] .genre-card { | |
| border-bottom-color: transparent !important; } | |
| .gc-image-container { | |
| overflow: hidden; | |
| position: relative; } | |
| .gc-image { | |
| height: 198px; } | |
| [dir] .gc-image { | |
| background-size: cover; | |
| background-position: center center; | |
| background-repeat: no-repeat; } | |
| .gc-image-cols-1 { | |
| height: auto; } | |
| [dir] .gc-image-cols-1 { | |
| margin-top: 0px; | |
| padding-bottom: 100%; } | |
| @media (min-width: 592px) { | |
| [dir] .gc-image-cols-1 { | |
| margin-top: 0px; } } | |
| @media (min-width: 820px) { | |
| [dir] .gc-image-cols-1 { | |
| margin-top: 0px; } } | |
| @media (min-width: 1280px) { | |
| [dir] .gc-image-cols-1 { | |
| margin-top: 0px; } } | |
| .gc-image-cols-2 { | |
| height: auto; } | |
| [dir] .gc-image-cols-2 { | |
| margin-top: -8px; | |
| padding-bottom: 50%; } | |
| @media (min-width: 592px) { | |
| [dir] .gc-image-cols-2 { | |
| margin-top: -8px; } } | |
| @media (min-width: 820px) { | |
| [dir] .gc-image-cols-2 { | |
| margin-top: -10px; } } | |
| @media (min-width: 1280px) { | |
| [dir] .gc-image-cols-2 { | |
| margin-top: -12px; } } | |
| .gc-image-cols-3 { | |
| height: auto; } | |
| [dir] .gc-image-cols-3 { | |
| margin-top: -10.66667px; | |
| padding-bottom: 33.33333%; } | |
| @media (min-width: 592px) { | |
| [dir] .gc-image-cols-3 { | |
| margin-top: -10.66667px; } } | |
| @media (min-width: 820px) { | |
| [dir] .gc-image-cols-3 { | |
| margin-top: -13.33333px; } } | |
| @media (min-width: 1280px) { | |
| [dir] .gc-image-cols-3 { | |
| margin-top: -16px; } } | |
| .gc-image-cols-4 { | |
| height: auto; } | |
| [dir] .gc-image-cols-4 { | |
| margin-top: -12px; | |
| padding-bottom: 25%; } | |
| @media (min-width: 592px) { | |
| [dir] .gc-image-cols-4 { | |
| margin-top: -12px; } } | |
| @media (min-width: 820px) { | |
| [dir] .gc-image-cols-4 { | |
| margin-top: -15px; } } | |
| @media (min-width: 1280px) { | |
| [dir] .gc-image-cols-4 { | |
| margin-top: -18px; } } | |
| .gc-image-cols-5 { | |
| height: auto; } | |
| [dir] .gc-image-cols-5 { | |
| margin-top: -12.8px; | |
| padding-bottom: 20%; } | |
| @media (min-width: 592px) { | |
| [dir] .gc-image-cols-5 { | |
| margin-top: -12.8px; } } | |
| @media (min-width: 820px) { | |
| [dir] .gc-image-cols-5 { | |
| margin-top: -16px; } } | |
| @media (min-width: 1280px) { | |
| [dir] .gc-image-cols-5 { | |
| margin-top: -19.2px; } } | |
| .gc-image-cols-6 { | |
| height: auto; } | |
| [dir] .gc-image-cols-6 { | |
| margin-top: -13.33333px; | |
| padding-bottom: 16.66667%; } | |
| @media (min-width: 592px) { | |
| [dir] .gc-image-cols-6 { | |
| margin-top: -13.33333px; } } | |
| @media (min-width: 820px) { | |
| [dir] .gc-image-cols-6 { | |
| margin-top: -16.66667px; } } | |
| @media (min-width: 1280px) { | |
| [dir] .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; } | |
| [dir] .gc-label-container { | |
| text-align: center; | |
| margin: 0 auto; | |
| padding: 16px; } | |
| [dir=ltr] .gc-label-container { | |
| left: 0%; | |
| right: 0%; } | |
| [dir=rtl] .gc-label-container { | |
| right: 0%; | |
| left: 0%; } | |
| @media (min-width: 592px) { | |
| .gc-label-container { | |
| max-width: 560px; } | |
| [dir] .gc-label-container { | |
| padding: 16px; } } | |
| @media (min-width: 820px) { | |
| .gc-label-container { | |
| max-width: 780px; } | |
| [dir] .gc-label-container { | |
| padding: 20px; } } | |
| @media (min-width: 1280px) { | |
| .gc-label-container { | |
| max-width: 1232px; } | |
| [dir] .gc-label-container { | |
| padding: 24px; } } | |
| .gc-label-text-wrapper { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; } | |
| .gc-label-text { | |
| font-size: 16px; } | |
| [dir] .gc-label-text { | |
| border-bottom: 1px solid transparent; } | |
| [dir] .genre-card:hover .gc-label-text { | |
| border-bottom-color: currentcolor; } | |
| .genre-card.pressed { | |
| opacity: 0.7; } | |
| /******************************************************************************* | |
| * 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] */ } | |
| [dir] .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); } | |
| [dir] .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; } | |
| [dir] .glue-page-header__content-overlay { | |
| background-color: #614348; } | |
| [dir=ltr] .glue-page-header__content-overlay { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .glue-page-header__content-overlay { | |
| left: 0; | |
| right: 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; } | |
| [dir] .glue-page-header__content-inner { | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| margin-top: -10px; | |
| margin-bottom: -10px; } | |
| [dir=ltr] .glue-page-header__content-inner { | |
| padding-left: 10px; | |
| margin-left: -10px; } | |
| [dir=rtl] .glue-page-header__content-inner { | |
| padding-right: 10px; | |
| margin-right: -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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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); } | |
| [dir] .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; } | |
| .glue-page-header__navbar-wrapper .facepile-list-container { | |
| opacity: 1; | |
| transition: opacity 166ms cubic-bezier(0.3, 0, 0, 1), transform 166ms cubic-bezier(0.3, 0, 0, 1); } | |
| [dir] .glue-page-header__navbar-wrapper .facepile-list-container { | |
| transform: translateY(0); | |
| transition-delay: 166ms; } | |
| /** | |
| * 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; } | |
| [dir=ltr] .glue-page-header__background { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .glue-page-header__background { | |
| left: 0; | |
| right: 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; } | |
| [dir] .glue-page-header__background-color { | |
| background-color: #a55; | |
| background-image: linear-gradient(to bottom, transparent, #614348); } | |
| [dir=ltr] .glue-page-header__background-color { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .glue-page-header__background-color { | |
| left: 0; | |
| right: 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; } | |
| [dir] .glue-page-header__background-image { | |
| background-size: cover; | |
| background-position: center center; } | |
| [dir=ltr] .glue-page-header__background-image { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .glue-page-header__background-image { | |
| left: 0; | |
| right: 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; } | |
| [dir] .glue-page-header__background-image-loader { | |
| transform: scale(0.95); } | |
| [dir=ltr] .glue-page-header__background-image-loader { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .glue-page-header__background-image-loader { | |
| left: 0; | |
| right: 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; } | |
| [dir] .glue-page-header__background-overlay { | |
| background: #614348; } | |
| [dir=ltr] .glue-page-header__background-overlay { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .glue-page-header__background-overlay { | |
| left: 0; | |
| right: 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: 0; | |
| pointer-events: none; } | |
| [dir] .glue-page-header__background-image-overlay-gradient { | |
| background: linear-gradient(to bottom, transparent, #614348); } | |
| [dir=ltr] .glue-page-header__background-image-overlay-gradient { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .glue-page-header__background-image-overlay-gradient { | |
| left: 0; | |
| right: 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; } | |
| [dir] .glue-page-header__background-scroll-overlay { | |
| background: #614348; } | |
| [dir=ltr] .glue-page-header__background-scroll-overlay { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .glue-page-header__background-scroll-overlay { | |
| left: 0; | |
| right: 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; } | |
| [dir] .glue-page-header__background-scroll-overlay-ellipse { | |
| background-image: radial-gradient(circle farthest-corner, transparent, #614348 50%); } | |
| [dir=ltr] .glue-page-header__background-scroll-overlay-ellipse { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .glue-page-header__background-scroll-overlay-ellipse { | |
| left: 0; | |
| right: 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; } | |
| [dir] .glue-page-header__background-scroll-overlay-ellipse-backdrop { | |
| background: #614348; } | |
| [dir=ltr] .glue-page-header__background-scroll-overlay-ellipse-backdrop { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .glue-page-header__background-scroll-overlay-ellipse-backdrop { | |
| left: 0; | |
| right: 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; } | |
| [dir] .glue-page-header__full-description-overlay { | |
| background-color: #614348; | |
| box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.5); | |
| border-radius: 8px; | |
| padding: 8px 16px; } | |
| .glue-page-header__full-description-overlay { | |
| transform: translate(-16px, -8px); } | |
| /** | |
| * This element class is defined further up, but we need this here to nest | |
| * other selectors inside of it, because the same content has different styles | |
| * depending on if it's in the regular header or the sticky header. | |
| * This is for the regular header. | |
| */ | |
| .glue-page-header__content { | |
| /** | |
| * Public element class for an image object. | |
| */ | |
| /** | |
| * Public element class to wrap around the image and inherit its sizing | |
| */ | |
| /** | |
| * Public element class for a wrapper around all the content except the image. | |
| */ | |
| /** | |
| * Public element class for the label above the title. The label is used for | |
| * displaying the type of entity the header represents. | |
| */ | |
| /** | |
| * Public element class for the title. | |
| */ | |
| /** | |
| * Public element class for the description. | |
| */ | |
| /** | |
| * Public element class for the meta info bar. This is a one line bar of | |
| * custom text content. For example, a playlist view might show the name of | |
| * the owner and playlist length here. | |
| */ | |
| /** | |
| * Public element class for the count label. This is the wrapper for both the | |
| * text and the number. The count can be follower count, listener count etc. | |
| */ | |
| /** | |
| * Public element class for the text in the count label. | |
| */ | |
| /** | |
| * Public element class for the number in the count label. | |
| */ | |
| /** | |
| * Public element class for the 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; } | |
| [dir=ltr] .glue-page-header__content .glue-page-header__image { | |
| margin-right: 24px; } | |
| [dir=rtl] .glue-page-header__content .glue-page-header__image { | |
| margin-left: 24px; } | |
| [dir] .glue-page-header__content .glue-page-header__image-inner { | |
| box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3); } | |
| .glue-page-header__content .glue-page-header__data { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| overflow: hidden; } | |
| [dir] .glue-page-header__content .glue-page-header__data { | |
| padding-bottom: 10px; | |
| margin-bottom: -10px; } | |
| [dir=ltr] .glue-page-header__content .glue-page-header__data { | |
| padding-left: 10px; | |
| margin-left: -10px; } | |
| [dir=rtl] .glue-page-header__content .glue-page-header__data { | |
| padding-right: 10px; | |
| margin-right: -10px; } | |
| .glue-page-header__content .glue-page-header__label { | |
| font-size: 11px; | |
| line-height: 16px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; | |
| line-height: 16px; | |
| height: 22px; | |
| color: #ffffff; } | |
| [dir] .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: 600; | |
| color: #ffffff; | |
| text-transform: none; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 4; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| overflow-wrap: break-word; } | |
| [dir] .glue-page-header__content .glue-page-header__title { | |
| margin: 0; } | |
| [dir=ltr] .glue-page-header__content .glue-page-header__title { | |
| margin-left: -0.07em; } | |
| [dir=rtl] .glue-page-header__content .glue-page-header__title { | |
| margin-right: -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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir=ltr] .glue-page-header__content .glue-page-header__count-label { | |
| right: 0; | |
| text-align: right; } | |
| [dir=rtl] .glue-page-header__content .glue-page-header__count-label { | |
| left: 0; | |
| text-align: left; } | |
| .glue-page-header__content .glue-page-header__count-label-text { | |
| font-size: 11px; | |
| line-height: 16px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; } | |
| .glue-page-header__content .glue-page-header__count-label-number { | |
| font-size: 11px; | |
| line-height: 16px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; } | |
| .glue-page-header__content .glue-page-header__count-label-facepile { | |
| height: 26px; } | |
| [dir] .glue-page-header__content .glue-page-header__count-label-facepile { | |
| margin-top: 24px; | |
| margin-bottom: -6px; } | |
| [dir] .glue-page-header__content .glue-page-header__count-label-link { | |
| border-bottom: 0; } | |
| .glue-page-header__content .glue-page-header__count-label-link:hover .glue-page-header__count-label-text { | |
| color: #ffffff; } | |
| .glue-page-header__content .glue-page-header__count-label-link:hover .glue-page-header__count-label-text:active { | |
| color: #d9d9d9; } | |
| [dir] .glue-page-header__content .glue-page-header__buttons > * { | |
| margin-top: 20px; } | |
| [dir=ltr] .glue-page-header__content .glue-page-header__buttons > * { | |
| margin-right: 12px; } | |
| [dir=rtl] .glue-page-header__content .glue-page-header__buttons > * { | |
| margin-left: 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: 600; | |
| color: #ffffff; | |
| text-transform: none; } | |
| .glue-page-header__content .glue-page-header__image { | |
| width: 136px; } | |
| .glue-page-header__content .glue-page-header__image.glue-page-header__image--artist, .glue-page-header__content .glue-page-header__image.glue-page-header__image--user { | |
| width: 120px; } | |
| .glue-page-header__content .glue-page-header__data .glue-page-header__buttons { | |
| display: none; } | |
| .glue-page-header__content > .glue-page-header__buttons { | |
| display: flex; } | |
| .glue-page-header__content .glue-page-header__count-label { | |
| display: none; } } | |
| html:lang(th) .glue-page-header__content .glue-page-header__title { | |
| line-height: 75px; } | |
| /** | |
| * 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; } | |
| [dir=ltr] .glue-page-header__sticky .glue-page-header__image { | |
| margin-right: 16px; } | |
| [dir=rtl] .glue-page-header__sticky .glue-page-header__image { | |
| margin-left: 16px; } | |
| .glue-page-header__sticky .glue-page-header__title { | |
| font-size: 28px; | |
| line-height: 36px; | |
| letter-spacing: -0.005em; | |
| font-weight: 600; | |
| color: #ffffff; | |
| text-transform: none; | |
| display: flex; | |
| overflow: hidden; | |
| flex: 1; } | |
| [dir] .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; } | |
| [dir=ltr] .glue-page-header__sticky .glue-page-header__buttons > * { | |
| margin-left: 12px; } | |
| [dir=rtl] .glue-page-header__sticky .glue-page-header__buttons > * { | |
| margin-right: 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; } | |
| [dir] .glue-page-header--artist .glue-page-header__content .glue-page-header__image-inner, [dir] .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. | |
| */ | |
| [dir] .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. | |
| */ | |
| [dir] .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: 200; | |
| color: #b3b3b3; | |
| text-transform: none; | |
| color: #ffffff; } | |
| [dir] .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: 200; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; | |
| color: #ffffff; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__image { | |
| margin: 0; } | |
| [dir=ltr] .glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__sticky-data { | |
| margin-left: 16px; } | |
| [dir=rtl] .glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__sticky-data { | |
| margin-right: 16px; } | |
| [dir] .glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__title { | |
| margin-bottom: 4px; } | |
| [dir] .glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__p2s-details { | |
| margin-top: 0; | |
| margin-bottom: 4px; } | |
| [dir] .glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__p2s-followers { | |
| margin-top: 0; | |
| margin-bottom: 16px; } | |
| [dir=ltr] .glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__buttons > * { | |
| margin-left: 0; | |
| margin-right: 12px; } | |
| [dir=rtl] .glue-page-header--playlist2shows .glue-page-header__sticky-inner .glue-page-header__buttons > * { | |
| margin-right: 0; | |
| margin-left: 12px; } | |
| /** | |
| * Public modifier class for a header with an active sticky header. | |
| */ | |
| [dir] .glue-page-header--with-active-sticky-header .glue-page-header__background-scroll-overlay-ellipse { | |
| background: #614348; } | |
| .glue-page-header--with-active-sticky-header .glue-page-header__content, | |
| .glue-page-header--with-active-sticky-header .facepile-list-container { | |
| opacity: 0; | |
| transition: opacity 166ms cubic-bezier(1, 0, 0.7, 1), transform 166ms cubic-bezier(1, 0, 0.7, 1); } | |
| [dir] .glue-page-header--with-active-sticky-header .glue-page-header__content, [dir] .glue-page-header--with-active-sticky-header .facepile-list-container { | |
| 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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .glue-page-header--with-active-sticky-header .glue-page-header__sticky-inner { | |
| transform: translateY(-48px); } | |
| [dir] .glue-page-header--with-active-sticky-header .glue-page-header__background { | |
| border-bottom: 1px solid #614348; } | |
| [dir=ltr] .glue-page-header--with-active-sticky-header .glue-page-header__background { | |
| right: -16px; } | |
| [dir=rtl] .glue-page-header--with-active-sticky-header .glue-page-header__background { | |
| left: -16px; } | |
| [dir] .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.77778) + 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.18182vw; | |
| 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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .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 .facepile-list-container, | |
| .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, | |
| .glue-page-header--with-no-animations .facepile-list-container { | |
| 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. | |
| */ | |
| [dir=ltr] .glue-page-header__content-wrapper--without-grid { | |
| margin-left: -12px; | |
| padding-left: 12px; } | |
| [dir=rtl] .glue-page-header__content-wrapper--without-grid { | |
| margin-right: -12px; | |
| padding-right: 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; } | |
| [dir] .glue-page-header__background-image-loader--is-loaded { | |
| transform: scale(1); } | |
| /** | |
| * 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; } | |
| [dir] .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; } | |
| [dir] .glue-page-header--sponsored .glue-page-header__background-image-overlay-gradient { | |
| background: linear-gradient(to bottom, transparent, #614348 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); } | |
| [dir] .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); } | |
| [dir] .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: 200; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; | |
| line-height: 16px; | |
| height: 22px; | |
| color: #ffffff; } | |
| .glue-page-header--sponsored .glue-page-header__sponsorship .sponsored-logo { | |
| position: static; } | |
| .glue-page-header--sponsored .sponsored-logo { | |
| position: absolute; | |
| top: 40px; | |
| transition: top 0.7s; } | |
| [dir=ltr] .glue-page-header--sponsored .sponsored-logo { | |
| right: 0; } | |
| [dir=rtl] .glue-page-header--sponsored .sponsored-logo { | |
| left: 0; } | |
| [dir] .glue-page-header--sponsored .sponsored-logo a:hover, [dir] .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) { | |
| [dir] .glue-page-header--sponsored .glue-page-header__background-image-overlay-gradient { | |
| background: linear-gradient(to bottom, transparent, #614348 50%); } } | |
| @media (max-width: 819px) { | |
| .glue-page-header--sponsored .sponsored-logo { | |
| top: 29px; } } | |
| /** | |
| * 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; } | |
| [dir] .header { | |
| background: #614348; | |
| margin: 0 auto; } | |
| [dir=ltr] .header { | |
| clear: left; } | |
| [dir=rtl] .header { | |
| clear: right; } | |
| .h-main-content { | |
| position: relative; } | |
| [dir] .h-main-content { | |
| padding-top: 16px; | |
| padding-bottom: 0; } | |
| .h-media { | |
| width: 210px; } | |
| [dir] .h-media { | |
| padding-bottom: 16px; } | |
| [dir=ltr] .h-media { | |
| float: left; } | |
| [dir=rtl] .h-media { | |
| float: right; } | |
| .h-media .card { | |
| position: relative; } | |
| .h-data { | |
| width: 100%; } | |
| [dir=ltr] .h-data { | |
| float: left; | |
| margin-left: -214px; | |
| padding-left: 230px; } | |
| [dir=rtl] .h-data { | |
| float: right; | |
| margin-right: -214px; | |
| padding-right: 230px; } | |
| .h-label { | |
| color: #a0a0a0; | |
| font-size: 11px; | |
| line-height: 16px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; } | |
| .h-title { | |
| position: relative; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| [dir] .h-title { | |
| margin: 0; } | |
| .h-title a { | |
| color: #ffffff !important; } | |
| [dir] .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; } | |
| [dir] .h-description { | |
| margin-top: 4px; } | |
| .h-controllers { | |
| bottom: 16px; | |
| position: absolute; } | |
| [dir=ltr] .h-controllers .button { | |
| margin-right: 12px; } | |
| [dir=rtl] .h-controllers .button { | |
| margin-left: 12px; } | |
| .h-search-bar { | |
| line-height: 36px; } | |
| [dir] .h-search-bar { | |
| border-top: 1px solid #614348; | |
| margin: 0; } | |
| .h-search-field-outer-wrapper { | |
| height: 56px; } | |
| [dir] .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; } | |
| [dir] .h-search-field-wrapper.sticky-top { | |
| background-color: #614348; } | |
| [dir=ltr] .h-search-field-wrapper.sticky-top { | |
| left: 0 !important; | |
| right: 0 !important; | |
| padding-right: 32px; | |
| padding-left: 32px; | |
| margin-right: auto; | |
| margin-left: auto; } | |
| [dir=rtl] .h-search-field-wrapper.sticky-top { | |
| right: 0 !important; | |
| left: 0 !important; | |
| padding-left: 32px; | |
| padding-right: 32px; | |
| margin-left: auto; | |
| margin-right: auto; } | |
| .h-search-field-wrapper.sticky-top::after { | |
| content: ""; | |
| display: table; } | |
| [dir] .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; } | |
| [dir=ltr] .h-search-wrapper::before { | |
| margin-left: 10px; } | |
| [dir=rtl] .h-search-wrapper::before { | |
| margin-right: 10px; } | |
| .h-search-wrapper:hover::before { | |
| color: #ffffff; } | |
| .h-search-wrapper:hover .h-search::-webkit-input-placeholder { | |
| color: #ffffff; } | |
| .h-search { | |
| width: 100%; | |
| height: 36px; | |
| color: #ffffff; | |
| display: block; | |
| outline: 0; } | |
| [dir] .h-search { | |
| background: transparent; | |
| border: 0; | |
| border-radius: 3px; | |
| padding-bottom: 0; } | |
| [dir=ltr] .h-search { | |
| padding-left: 36px; | |
| padding-right: 36px; } | |
| [dir=rtl] .h-search { | |
| padding-right: 36px; | |
| padding-left: 36px; } | |
| [dir] .focus .h-search, [dir] .h-search:focus { | |
| background: #614348; } | |
| .h-search-close { | |
| bottom: 0; | |
| display: none; | |
| position: absolute; | |
| top: 0; | |
| width: 36px; } | |
| [dir] .h-search-close { | |
| text-align: center; } | |
| [dir=ltr] .h-search-close { | |
| right: 0; } | |
| [dir=rtl] .h-search-close { | |
| left: 0; } | |
| .h-search-close:hover { | |
| color: #ffffff; } | |
| .focus .h-search-close { | |
| display: block; } | |
| .h-search-suggestions { | |
| display: none; | |
| position: absolute; | |
| list-style: none; | |
| max-height: 180px; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| width: 100%; | |
| top: 100%; } | |
| [dir] .h-search-suggestions { | |
| background: #614348; | |
| border-radius: 3px; | |
| padding: 0; } | |
| .focus .h-search-suggestions { | |
| display: block; } | |
| .h-search-suggestion { | |
| color: #a0a0a0; } | |
| [dir] .h-search-suggestion { | |
| border-radius: 3px; | |
| cursor: pointer; } | |
| [dir=ltr] .h-search-suggestion { | |
| padding-left: 36px; | |
| padding-right: 10px; } | |
| [dir=rtl] .h-search-suggestion { | |
| padding-right: 36px; | |
| padding-left: 10px; } | |
| .h-search-suggestion:hover { | |
| color: #ffffff; } | |
| [dir] .h-search-suggestion:hover { | |
| background: #614348; } | |
| .h-search-result { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| [dir=ltr] .h-search-matches { | |
| float: right; | |
| padding-left: 10px; } | |
| [dir=rtl] .h-search-matches { | |
| float: left; | |
| padding-right: 10px; } | |
| .header-image { | |
| min-height: 320px; | |
| max-width: 1480px; } | |
| [dir] .header-image { | |
| background-repeat: no-repeat; | |
| background-position: 50% 0; | |
| background-size: cover; | |
| background-color: black; | |
| border-bottom: 1px solid #614348; } | |
| .header-image::before { | |
| bottom: 0; | |
| content: ""; | |
| position: absolute; | |
| top: 0; } | |
| [dir] .header-image::before { | |
| background: rgba(0, 0, 0, 0.6); } | |
| [dir=ltr] .header-image::before { | |
| left: 0; | |
| right: 0; } | |
| [dir=rtl] .header-image::before { | |
| right: 0; | |
| left: 0; } | |
| .header-image .h-main-content { | |
| height: 275px; } | |
| [dir] .header-image .nav { | |
| border-bottom: 0; } | |
| .header-album .h-title { | |
| text-overflow: clip; | |
| white-space: normal; } | |
| [dir] .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; } | |
| [dir] .glue-page-header .card-type-station:not(.card-type-station-cluster) .card-station-mask { | |
| background-image: url("https://d2j0f09xqmv212.cloudfront.net/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%; } | |
| [dir=ltr] .glue-page-header .card-type-station:not(.card-type-station-cluster) .card-station-overlay { | |
| left: 24.77%; } | |
| [dir=rtl] .glue-page-header .card-type-station:not(.card-type-station-cluster) .card-station-overlay { | |
| right: 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%; } | |
| [dir] .glue-page-header .card-type-station:not(.card-type-station-cluster).card-station-artist .card-station-overlay { | |
| border-radius: 500px; } | |
| [dir=ltr] .glue-page-header .card-type-station:not(.card-type-station-cluster).card-station-artist .card-station-overlay { | |
| left: 20.24%; } | |
| [dir=rtl] .glue-page-header .card-type-station:not(.card-type-station-cluster).card-station-artist .card-station-overlay { | |
| right: 20.24%; } | |
| [dir] .header-inline .h-main-content { | |
| padding: 0; } | |
| .header-inline .h-media { | |
| width: 134px; } | |
| [dir] .header-inline .h-media { | |
| padding: 0; } | |
| [dir] .header-inline .h-data { | |
| padding-top: 0; } | |
| [dir=ltr] .header-inline .h-data { | |
| margin-left: -134px; | |
| padding-left: 150px; } | |
| [dir=rtl] .header-inline .h-data { | |
| margin-right: -134px; | |
| padding-right: 150px; } | |
| .header-inline .h-controllers { | |
| bottom: 0; } | |
| .header-inline .h-title { | |
| font-size: 36px; | |
| line-height: 44px; | |
| letter-spacing: -0.005em; | |
| font-weight: 600; | |
| color: #ffffff; | |
| text-transform: none; | |
| max-height: inherit; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow-wrap: break-word; } | |
| [dir] .header-inline .h-title { | |
| margin-bottom: 36px; } | |
| [dir=ltr] .fade-in { | |
| animation: fadeIn 0.7s; } | |
| [dir=rtl] .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: 600; | |
| color: #ffffff; | |
| text-transform: none; } | |
| .h-media { | |
| width: 130px; } | |
| [dir] .h-media { | |
| padding-bottom: 60px; } | |
| .header-inline .h-title { | |
| max-height: 88px; } | |
| [dir=ltr] .h-controllers { | |
| left: 32px; } | |
| [dir=rtl] .h-controllers { | |
| right: 32px; } | |
| [dir=ltr] .header-small .h-controllers { | |
| left: inherit; } | |
| [dir=rtl] .header-small .h-controllers { | |
| right: inherit; } | |
| [dir=ltr] .header-inline .h-controllers { | |
| left: inherit; } | |
| [dir=rtl] .header-inline .h-controllers { | |
| right: inherit; } } | |
| .h-sticky-header { | |
| bottom: 66px; | |
| height: 0; | |
| overflow: hidden; | |
| position: absolute; | |
| width: 100%; } | |
| [dir=ltr] .h-sticky-header { | |
| left: 0; } | |
| [dir=rtl] .h-sticky-header { | |
| right: 0; } | |
| .h-sticky-header .h-sticky-header-inner { | |
| overflow: hidden; | |
| width: 100%; | |
| z-index: 1020; } | |
| [dir] .h-sticky-header .h-sticky-header-inner { | |
| background-color: #614348; | |
| padding: 0; } | |
| [dir=ltr] .h-sticky-header .h-sticky-header-inner { | |
| left: 0 !important; | |
| right: 0 !important; } | |
| [dir=rtl] .h-sticky-header .h-sticky-header-inner { | |
| right: 0 !important; | |
| left: 0 !important; } | |
| .h-sticky-header .h-sticky-header-inner.sticky-top { | |
| position: fixed; | |
| top: 0; } | |
| [dir] .h-sticky-header .h-sticky-container { | |
| border-bottom: 1px solid #614348; | |
| 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; } | |
| [dir] .h-sticky-header .h-sticky-image { | |
| background-size: cover; | |
| background-position: center; } | |
| [dir=ltr] .h-sticky-header .h-sticky-image { | |
| float: left; | |
| margin-right: 15px; } | |
| [dir=rtl] .h-sticky-header .h-sticky-image { | |
| float: right; | |
| margin-left: 15px; } | |
| .h-sticky-header .h-sticky-image .card-image { | |
| bottom: 0; | |
| top: 0; } | |
| [dir=ltr] .h-sticky-header .h-sticky-image .card-image { | |
| left: 0; | |
| right: 0; } | |
| [dir=rtl] .h-sticky-header .h-sticky-image .card-image { | |
| right: 0; | |
| left: 0; } | |
| [dir=ltr] .h-sticky-header .h-sticky-controllers { | |
| float: right; | |
| margin-left: 15px; } | |
| [dir=rtl] .h-sticky-header .h-sticky-controllers { | |
| float: left; | |
| margin-right: 15px; } | |
| [dir=ltr] .h-sticky-header .h-sticky-controllers .button:not(:first-child) { | |
| margin-left: 12px; } | |
| [dir=rtl] .h-sticky-header .h-sticky-controllers .button:not(:first-child) { | |
| margin-right: 12px; } | |
| .h-sticky-header .h-sticky-title { | |
| color: #ffffff; | |
| font-size: 28px; | |
| line-height: 36px; | |
| letter-spacing: -0.005em; | |
| font-weight: 600; | |
| color: #ffffff; | |
| text-transform: none; | |
| line-height: 36px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| [dir] .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; } | |
| /** | |
| * Tracklists | |
| * | |
| * Lists of tracks for different purposes, customization is not possible. | |
| * Every tracklist has a unique set of columns and properties. | |
| * | |
| * Styleguide 90.1 | |
| */ | |
| /** | |
| * Tables | |
| * | |
| * For basic styling—light padding and only horizontal dividers—add the base class | |
| * <code>.table</code> to any <code><table></code>. It may seem super redundant, | |
| * but given the widespread use of tables for other plugins like calendars and date | |
| * pickers, we've opted to isolate our custom table styles. | |
| * | |
| * Template: tables | |
| * | |
| * Styleguide 30.6 | |
| */ | |
| table { | |
| max-width: 100%; } | |
| th { | |
| font-weight: 400; } | |
| [dir=ltr] th { | |
| text-align: left; } | |
| [dir=rtl] th { | |
| text-align: right; } | |
| .table { | |
| width: 100%; } | |
| .table th, | |
| .table td { | |
| position: relative; | |
| line-height: 20px; | |
| vertical-align: top; } | |
| [dir] .table th, [dir] .table td { | |
| padding: 8px; | |
| border-top: 1px solid #614348; } | |
| [dir] .table tbody > tr:last-child > td { | |
| border-bottom: 1px solid #614348; } | |
| [dir] .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: '\00a0'; | |
| display: block; | |
| height: 10px; | |
| width: 10px; } | |
| [dir] .trend-mark.trend-new::before { | |
| background-color: #4687d6; | |
| border-radius: 10px; | |
| margin: 0 auto; } | |
| .trend-mark.trend-equal::before { | |
| content: '\00a0'; | |
| display: block; | |
| height: 2px; | |
| width: 8px; } | |
| [dir] .trend-mark.trend-equal::before { | |
| background-color: #614348; | |
| margin: 0 auto; } | |
| .trend-mark.trend-up { | |
| color: #1ed760; } | |
| .trend-mark.trend-down { | |
| color: #cd1a2b; } | |
| /* | |
| * Playlist & Collection | |
| * | |
| * Shared list for playlist and collection. | |
| * | |
| * Template: $tracklist-playlist | |
| * Data: demo-playlist | |
| * | |
| * Styleguide 90.4 | |
| */ | |
| @media screen and (max-width: 1200px) { | |
| .tracklist-playlist.narrow .tl-added-by { | |
| display: none; } } | |
| @media screen and (max-width: 900px) { | |
| .tracklist-playlist.narrow .tl-date-added { | |
| display: none; } } | |
| @media screen and (max-width: 950px) { | |
| .tracklist-playlist .tl-time { | |
| display: none; } } | |
| @media screen and (max-width: 850px) { | |
| .tracklist-playlist .tl-albums { | |
| display: none; } } | |
| @media screen and (max-width: 720px) { | |
| .tracklist-playlist .tl-added-by { | |
| display: none; } } | |
| @media screen and (max-width: 680px) { | |
| .tracklist-playlist .tl-date-added { | |
| display: none; } } | |
| .tracklist-playlist.tracklist-playlist--with-feedback .tl-local { | |
| display: none; } | |
| @media screen and (max-width: 750px) { | |
| .tracklist-playlist.tracklist-playlist--with-feedback .tl-date-added { | |
| display: none; } | |
| .tracklist-playlist.tracklist-playlist--with-feedback th.tl-name { | |
| width: 120px; } } | |
| @media screen and (max-width: 600px) { | |
| .tracklist-playlist.tracklist-playlist--with-feedback th.tl-name { | |
| width: 70px; } } | |
| /* | |
| * 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; } | |
| [dir] .tracklist-podcast .tl-progress .row-progress { | |
| border-radius: 2px; | |
| background-color: #614348; } | |
| .tracklist-podcast .tl-progress .row-progress__bar { | |
| --progress: 0; | |
| /* [1] */ | |
| width: calc(var(--progress) * 100%); | |
| height: 4px; } | |
| [dir] .tracklist-podcast .tl-progress .row-progress__bar { | |
| background-color: #4687d6; } | |
| .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; } | |
| [dir=ltr] .tracklist-podcast .tl-status-indicator { | |
| margin-right: 7px; } | |
| [dir=rtl] .tracklist-podcast .tl-status-indicator { | |
| margin-left: 7px; } | |
| .tracklist-podcast .tl-time .tl-cell__fixed-height { | |
| justify-content: flex-end; } | |
| .tracklist-podcast .tl-name__title { | |
| text-overflow: ellipsis; | |
| overflow: hidden; } | |
| .tracklist-podcast .tl-name__description { | |
| white-space: normal; | |
| color: #b3b3b3; } | |
| [dir] .tracklist-podcast .tl-name__description { | |
| margin-bottom: 16px; } | |
| [dir=ltr] .tracklist-podcast .tl-name__description { | |
| padding-right: 16px; } | |
| [dir=rtl] .tracklist-podcast .tl-name__description { | |
| padding-left: 16px; } | |
| .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: scroll; | |
| max-height: 160px; } | |
| /* | |
| * 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; } | |
| [dir=ltr] .tracklist-search .tl-time { | |
| padding-right: 12px; } | |
| [dir=rtl] .tracklist-search .tl-time { | |
| padding-left: 12px; } } | |
| /* | |
| * Station track list | |
| * | |
| * Track list for station view. | |
| * | |
| * Template: $tracklist-station | |
| * Data: demo-station | |
| * | |
| * Styleguide 90.4 | |
| */ | |
| .tracklist-station-footer-visible { | |
| opacity: 1; } | |
| [dir] .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); } | |
| [dir] .tracklist-station-footer-visible-animate { | |
| padding-top: 0; | |
| transition-property: opacity, padding-top; } | |
| .tracklist-station-footer-hidden-position { | |
| opacity: 0; } | |
| [dir] .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); } | |
| [dir] .tracklist-station-footer-hide-animate { | |
| transition-property: opacity; } | |
| .tracklist-station-container::after { | |
| display: block; | |
| position: relative; | |
| height: 250px; | |
| width: 100%; | |
| content: ''; | |
| pointer-events: none; } | |
| [dir] .tracklist-station-container::after { | |
| margin-top: -250px; | |
| background: linear-gradient(rgba(24, 24, 24, 0), #614348); } | |
| @media screen and (max-width: 850px) { | |
| .tracklist-station .tl-albums { | |
| display: none; } } | |
| @media screen and (max-width: 600px) { | |
| .tracklist-station th.tl-name { | |
| width: 70px; } } | |
| .tracklist-station-footer-text { | |
| display: block; | |
| color: #ffffff; | |
| font-size: 14px; | |
| pointer-events: none; } | |
| [dir] .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: #a0a0a0; | |
| table-layout: fixed; | |
| width: 100%; } | |
| [dir] .tracklist-album, [dir] .tracklist-chart, [dir] .tracklist-basic, [dir] .tracklist-playlist, [dir] .tracklist-podcast, [dir] .tracklist-popular, [dir] .tracklist-station, [dir] .tracklist-queue, [dir] .tracklist-search { | |
| border-bottom: 1px solid #614348; } | |
| .tl-header th, | |
| .tl-cell { | |
| position: relative; } | |
| [dir] .tl-header th, [dir] .tl-cell { | |
| border-top: 1px solid #614348; } | |
| [dir=ltr] .tl-header th, [dir=ltr] .tl-cell { | |
| padding: 0 0 0 12px; } | |
| [dir=rtl] .tl-header th, [dir=rtl] .tl-cell { | |
| padding: 0 12px 0 0; } | |
| .tl-header th { | |
| font-size: 11px; | |
| line-height: 16px; | |
| letter-spacing: 0.015em; | |
| font-weight: 200; | |
| color: #b3b3b3; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; | |
| line-height: 28px; | |
| text-transform: uppercase; | |
| vertical-align: bottom; } | |
| [dir] .tl-header th { | |
| border-top: 0; | |
| cursor: default; } | |
| [dir] .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; } | |
| [dir] .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; } | |
| [dir] .tl-header .tl-date-added, [dir] .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; } | |
| [dir=ltr] .tl-header th:last-child { | |
| padding-right: 12px; } | |
| [dir=rtl] .tl-header th:last-child { | |
| padding-left: 12px; } | |
| [dir] .sticky-clone .tl-header { | |
| background: #614348; } | |
| .tl-cell { | |
| height: 40px; } | |
| [dir=ltr] .tl-cell:last-child { | |
| padding-right: 12px; } | |
| [dir=rtl] .tl-cell:last-child { | |
| padding-left: 12px; } | |
| .tl-cell, | |
| .tl-cell > div { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| .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; } | |
| [dir] .tl-image { | |
| padding: 0; } | |
| .tl-image img { | |
| display: block; | |
| max-width: none; | |
| position: absolute; | |
| top: 0; } | |
| [dir=ltr] .tl-image img { | |
| left: 0; } | |
| [dir=rtl] .tl-image img { | |
| right: 0; } | |
| .tl-time { | |
| width: 70px; } | |
| [dir=ltr] .tl-time { | |
| text-align: right; | |
| padding-left: 0; } | |
| [dir=rtl] .tl-time { | |
| text-align: left; | |
| padding-right: 0; } | |
| .tl-listen-count { | |
| width: 130px; } | |
| [dir=ltr] .tl-listen-count { | |
| text-align: right; } | |
| [dir=rtl] .tl-listen-count { | |
| text-align: left; } | |
| .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; } | |
| [dir] .tl-more, [dir] .tl-save, [dir] .tl-trend { | |
| padding: 0; } | |
| [dir] .tl-trend { | |
| text-align: center; } | |
| [dir] .tl-message { | |
| text-align: center; } | |
| .tl-row .button-play { | |
| display: none; | |
| height: 28px; | |
| line-height: 26px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| width: 28px; } | |
| [dir] .tl-row .button-play { | |
| padding-top: 1px; | |
| border-radius: 14px; | |
| background: rgba(24, 24, 24, 0.7); | |
| transition-property: transform, box-shadow, color, background-color; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .tl-row .button-play { | |
| margin-left: -4px; | |
| padding-left: 28px; | |
| padding-right: 28px; | |
| padding-left: 0; | |
| padding-right: 0; } | |
| [dir=rtl] .tl-row .button-play { | |
| margin-right: -4px; | |
| padding-right: 28px; | |
| padding-left: 28px; | |
| padding-right: 0; | |
| padding-left: 0; } | |
| [dir] .tl-row .button-play .b-alt-text { | |
| margin-top: -26px; } | |
| [dir] .tl-row .button-play.contextmenu-active, [dir] .tl-row .button-play:not(:disabled):hover { | |
| background-color: rgba(24, 24, 24, 0.7); } | |
| .tl-row .button-play:not(:disabled):hover:active { | |
| color: #a0a0a0; } | |
| [dir] .tl-row .button-play:not(:disabled):hover:active { | |
| background: rgba(24, 24, 24, 0.7); | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .tl-row .button-play:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .tl-row .button-play { | |
| transition-duration: 50ms; } } | |
| .tl-row .button-play::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .tl-row .button-play::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .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); } | |
| [dir] .tl-row .button-play.contextmenu-active, [dir] .tl-row .button-play:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .tl-row .button-play.contextmenu-active, [dir] .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); } | |
| [dir] .tl-row .button-play.contextmenu-active::after, [dir] .tl-row .button-play:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .tl-row .button-play.contextmenu-active::after, [dir] .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; } | |
| [dir] .tl-row .button-play::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .tl-row .button-play::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row .button-play::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row .button-play.contextmenu-active, [dir] .tl-row .button-play:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent; } | |
| [dir] .tl-row .button-play.contextmenu-active::after, [dir] .tl-row .button-play:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .tl-row .button-play.contextmenu-active, [dir] .tl-row .button-play:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| [dir] .tl-row .button-play.contextmenu-active::after, [dir] .tl-row .button-play:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } } | |
| [dir] .tl-row .button-play:not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .tl-row .button-play:not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .tl-row .button-play.contextmenu-active, [dir] .tl-row .button-play:not(:disabled):hover { | |
| transform: scale(1.07143); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .tl-row .button-play.contextmenu-active, [dir] .tl-row .button-play:not(:disabled):hover { | |
| transform: scale(1.07143); } } | |
| .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; | |
| line-height: 28px; | |
| font-size: 14px; | |
| width: calc(100% - 7px); } | |
| [dir] .tl-row .button-play::before { | |
| border-radius: 500px; } | |
| [dir=ltr] .tl-row .button-play::before { | |
| left: 0; | |
| right: 0; | |
| text-align: left; | |
| padding-left: 7px; } | |
| [dir=rtl] .tl-row .button-play::before { | |
| right: 0; | |
| left: 0; | |
| text-align: right; | |
| padding-right: 7px; } | |
| .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; } | |
| [dir] .tl-row .button-play.button-play.playing:not(:hover), [dir] .tl-row.playing .tl-row .button-play.button-play:not(:hover), [dir] .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; } | |
| [dir] .tl-row .button-play.button-play.playing:not(:hover)::after, [dir] .tl-row.playing .tl-row .button-play.button-play:not(:hover)::after, [dir] .card.playing .tl-row .button-play.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .tl-row .button-play.button-play.playing:not(:hover)::after, [dir=ltr] .tl-row.playing .tl-row .button-play.button-play:not(:hover)::after, [dir=ltr] .card.playing .tl-row .button-play.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row .button-play.button-play.playing:not(:hover)::after, [dir=rtl] .tl-row.playing .tl-row .button-play.button-play:not(:hover)::after, [dir=rtl] .card.playing .tl-row .button-play.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row .button-play.button-play.playing:not(:hover).contextmenu-active, [dir] .tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .tl-row .button-play.button-play.playing:not(:hover).contextmenu-active::after, [dir] .tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .tl-row .button-play.button-play.playing:not(:hover).contextmenu-active, [dir] .tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active, [dir] .card.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row .button-play.button-play.playing:not(:hover).contextmenu-active::after, [dir] .tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .tl-row .button-play.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover:active, [dir] .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row .button-play.button-play.playing:not(:hover):not(:disabled):hover:active::after, [dir] .tl-row.playing .tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir] .tl-row.playing.tl-row .button-play.button-play:not(:hover), [dir] .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; } | |
| [dir] .tl-row.playing.tl-row .button-play.button-play:not(:hover)::after, [dir] .card.playing.tl-row .button-play.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .tl-row.playing.tl-row .button-play.button-play:not(:hover)::after, [dir=ltr] .card.playing.tl-row .button-play.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row.playing.tl-row .button-play.button-play:not(:hover)::after, [dir=rtl] .card.playing.tl-row .button-play.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active, [dir] .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; } | |
| [dir] .tl-row.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active::after, [dir] .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) { | |
| [dir] .tl-row.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active, [dir] .card.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.tl-row .button-play.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.tl-row .button-play.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .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; } | |
| [dir] .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; } | |
| [dir=ltr] .tl-save .button::before { | |
| padding-left: 2px; } | |
| [dir=rtl] .tl-save .button::before { | |
| padding-right: 2px; } | |
| .nft-enabled .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; } | |
| [dir] .tl-feedback { | |
| padding: 0 5px; } | |
| .tl-feedback .button { | |
| visibility: hidden; | |
| width: 24px; } | |
| [dir=ltr] .tl-feedback .button.button-icon-only::before { | |
| padding-left: 4px; } | |
| [dir=rtl] .tl-feedback .button.button-icon-only::before { | |
| padding-right: 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; } | |
| .nft-enabled .tl-feedback { | |
| width: 40px; } | |
| .nft-enabled .tl-feedback .button-thumbs-up, | |
| .nft-enabled .tl-feedback .button.spoticon-heart-16, | |
| .nft-enabled .tl-feedback .button.spoticon-heart-active-16 { | |
| display: none; } | |
| .nft-enabled .tl-feedback .button.button-thumbs-down::before, | |
| .nft-enabled .tl-feedback .button.spoticon-ban-16::before, | |
| .nft-enabled .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: "\f106"; | |
| font-size: 16px; | |
| line-height: inherit; } | |
| .nft-enabled .tl-feedback .button.spoticon-ban-active-16 { | |
| color: #cd1a2b; | |
| visibility: visible; } | |
| .tl-row.current .tl-cell:not(.tl-number), | |
| .tl-row.current .tl-cell a:link, | |
| .tl-row.current .tl-highlight { | |
| color: #1ed760; } | |
| .tl-row.current .tl-feedback.thumbs-none .button { | |
| pointer-events: auto; | |
| visibility: visible; } | |
| .offline .tl-row.current .tl-feedback.thumbs-none .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; } | |
| [dir] .tl-row.selected + .tl-row .tl-cell { | |
| border-top-color: #614348; } | |
| [dir] .tl-row.selected .tl-cell { | |
| background-color: #614348; | |
| border-color: #614348; } | |
| .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: '\f1B9'; | |
| line-height: 32px; | |
| width: 18px; } | |
| [dir=ltr] .tl-row.offline-downloading .tl-save .button.button-add::before, [dir=ltr] .tl-row.offline-downloading.added .tl-save .button.button-add::before { | |
| animation: glue-keyframes-rotate-ltr 1.5s linear infinite; } | |
| [dir=rtl] .tl-row.offline-downloading .tl-save .button.button-add::before, [dir=rtl] .tl-row.offline-downloading.added .tl-save .button.button-add::before { | |
| animation: glue-keyframes-rotate-rtl 1.5s linear infinite; } | |
| .tl-row.unavailable .tl-cell, | |
| .tl-row.unavailable .tl-cell a:link, | |
| .tl-row.unavailable .tl-highlight { | |
| color: #614348 !important; } | |
| .tl-row.unavailable .button-play { | |
| display: none !important; } | |
| .tl-row.unavailable .tl-number-wrap { | |
| display: inline-block; } | |
| .tl-row.unavailable .tl-number { | |
| color: #614348; } | |
| .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: #614348 !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: #614348; } | |
| .offline .tl-row:not(.unavailable):not(.local).offline-downloaded .tl-cell, .offline .tl-row:not(.unavailable):not(.local).locally-playable .tl-cell { | |
| color: inherit !important; } | |
| .offline .tl-row:not(.unavailable):not(.local).offline-downloaded .tl-cell a:link, | |
| .offline .tl-row:not(.unavailable):not(.local).offline-downloaded .tl-highlight, .offline .tl-row:not(.unavailable):not(.local).locally-playable .tl-cell a:link, | |
| .offline .tl-row:not(.unavailable):not(.local).locally-playable .tl-highlight { | |
| color: #ffffff !important; } | |
| .offline .tl-row:not(.unavailable):not(.local).offline-downloaded:hover .button-play, | |
| .offline .tl-row:not(.unavailable):not(.local).offline-downloaded.playing .button-play, .offline .tl-row:not(.unavailable):not(.local).locally-playable:hover .button-play, | |
| .offline .tl-row:not(.unavailable):not(.local).locally-playable.playing .button-play { | |
| display: inline-block !important; } | |
| .offline .tl-row:not(.unavailable):not(.local).offline-downloaded:hover .tl-number-wrap, | |
| .offline .tl-row:not(.unavailable):not(.local).offline-downloaded.playing .tl-number-wrap, .offline .tl-row:not(.unavailable):not(.local).locally-playable:hover .tl-number-wrap, | |
| .offline .tl-row:not(.unavailable):not(.local).locally-playable.playing .tl-number-wrap { | |
| display: none; } | |
| .offline .tl-row:not(.unavailable):not(.local).offline-downloaded.current .tl-cell, | |
| .offline .tl-row:not(.unavailable):not(.local).offline-downloaded.current .tl-cell a:link, | |
| .offline .tl-row:not(.unavailable):not(.local).offline-downloaded.current .tl-cell .tl-highlight, .offline .tl-row:not(.unavailable):not(.local).locally-playable.current .tl-cell, | |
| .offline .tl-row:not(.unavailable):not(.local).locally-playable.current .tl-cell a:link, | |
| .offline .tl-row:not(.unavailable):not(.local).locally-playable.current .tl-cell .tl-highlight { | |
| color: #1ed760 !important; } | |
| [dir] .tl-row:hover .tl-cell, [dir] .tl-row.contextmenu-active .tl-cell { | |
| background: #614348; } | |
| [dir] .tl-row:hover .tl-message, [dir] .tl-row.contextmenu-active .tl-message { | |
| background: transparent; } | |
| .tl-row:hover .tl-highlight, | |
| .tl-row.contextmenu-active .tl-highlight { | |
| color: white; } | |
| .tl-row:hover.playing .tl-highlight, | |
| .tl-row.contextmenu-active.playing .tl-highlight { | |
| color: #1ed760; } | |
| .tl-row:hover .tl-number-wrap, | |
| .tl-row.contextmenu-active .tl-number-wrap { | |
| display: none; } | |
| .tl-row:hover.unavailable .tl-number-wrap, | |
| .tl-row.contextmenu-active.unavailable .tl-number-wrap { | |
| display: block; } | |
| .tl-row:hover .button-play, | |
| .tl-row.contextmenu-active .button-play { | |
| display: inline-block; } | |
| .tl-row:hover .tl-more .button, | |
| .tl-row:hover .tl-save .button, | |
| .tl-row.contextmenu-active .tl-more .button, | |
| .tl-row.contextmenu-active .tl-save .button { | |
| visibility: visible; } | |
| .tl-row:hover .tl-more .button:not([disabled])::before, | |
| .tl-row:hover .tl-save .button:not([disabled])::before, | |
| .tl-row.contextmenu-active .tl-more .button:not([disabled])::before, | |
| .tl-row.contextmenu-active .tl-save .button:not([disabled])::before { | |
| color: #ffffff; } | |
| .tl-row:hover .tl-more .button:not([disabled]):hover::before, | |
| .tl-row:hover .tl-save .button:not([disabled]):hover::before, | |
| .tl-row.contextmenu-active .tl-more .button:not([disabled]):hover::before, | |
| .tl-row.contextmenu-active .tl-save .button:not([disabled]):hover::before { | |
| color: #ffffff; } | |
| .tl-row:hover .tl-feedback.thumbs-none .button, | |
| .tl-row.contextmenu-active .tl-feedback.thumbs-none .button { | |
| visibility: visible; } | |
| .tl-row:hover .tl-feedback.thumbs-none .button::before, | |
| .tl-row.contextmenu-active .tl-feedback.thumbs-none .button::before { | |
| color: #a0a0a0; } | |
| .tl-row:hover .tl-feedback.thumbs-none .button:hover::before, | |
| .tl-row.contextmenu-active .tl-feedback.thumbs-none .button:hover::before { | |
| color: #ffffff; } | |
| .offline .tl-row:hover .tl-feedback.thumbs-none .button, .offline | |
| .tl-row.contextmenu-active .tl-feedback.thumbs-none .button { | |
| visibility: hidden; } | |
| .tl-row:hover.current .tl-highlight, | |
| .tl-row.contextmenu-active.current .tl-highlight { | |
| color: #1ed760; } | |
| .tl-row:hover.offline-waiting .tl-save .button.button-add.hover::before, .tl-row:hover.offline-downloading .tl-save .button.button-add.hover::before, | |
| .tl-row.contextmenu-active.offline-waiting .tl-save .button.button-add.hover::before, | |
| .tl-row.contextmenu-active.offline-downloading .tl-save .button.button-add.hover::before { | |
| content: '\f1C6'; } | |
| [dir=ltr] .tl-row:hover.offline-waiting .tl-save .button.button-add.hover::before, [dir=ltr] .tl-row:hover.offline-downloading .tl-save .button.button-add.hover::before, [dir=ltr] .tl-row.contextmenu-active.offline-waiting .tl-save .button.button-add.hover::before, [dir=ltr] .tl-row.contextmenu-active.offline-downloading .tl-save .button.button-add.hover::before { | |
| animation: none; } | |
| [dir=rtl] .tl-row:hover.offline-waiting .tl-save .button.button-add.hover::before, [dir=rtl] .tl-row:hover.offline-downloading .tl-save .button.button-add.hover::before, [dir=rtl] .tl-row.contextmenu-active.offline-waiting .tl-save .button.button-add.hover::before, [dir=rtl] .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: '\f1C5'; } | |
| .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: #a0a0a0 !important; } | |
| [dir] .tl-row:hover .tl-explicit .label, [dir] .tl-row:hover .tl-premium .label, [dir] .tl-row.selection-focus .tl-explicit .label, [dir] .tl-row.selection-focus .tl-premium .label { | |
| border-color: #614348 !important; } | |
| .tl-row.selection-focus-touch .tl-more .button { | |
| visibility: visible; } | |
| .tl-highlight { | |
| color: #ffffff; } | |
| .tl-featuring a, | |
| .tl-featuring span { | |
| color: #a0a0a0; } | |
| .tl-featuring a:hover, | |
| .tl-featuring span:hover { | |
| color: lightgray; } | |
| .tl-status-indicator { | |
| display: inline-block; | |
| width: 10px; | |
| height: 10px; } | |
| [dir] .tl-status-indicator { | |
| border-radius: 50%; | |
| border: 1px solid #4687d6; } | |
| [dir=ltr] .tl-status-indicator { | |
| margin-right: 2px; } | |
| [dir=rtl] .tl-status-indicator { | |
| margin-left: 2px; } | |
| [dir] .tl-status-indicator--new { | |
| background-color: #4687d6; } | |
| [dir=ltr] .tl-status-indicator--in-progress { | |
| background: linear-gradient(to right, #4687d6 0%, #4687d6 55%, rgba(70, 135, 214, 0) 55%, rgba(70, 135, 214, 0) 100%); } | |
| [dir=rtl] .tl-status-indicator--in-progress { | |
| background: linear-gradient(to left, #4687d6 0%, #4687d6 55%, rgba(70, 135, 214, 0) 55%, rgba(70, 135, 214, 0) 100%); } | |
| .tl-item-local { | |
| display: block; | |
| width: 40px; | |
| height: 40px; | |
| line-height: 40px; } | |
| [dir] .tl-item-local { | |
| text-align: center; } | |
| .tl-explicit .label, | |
| .tl-premium .label { | |
| color: #614348; | |
| letter-spacing: 0; | |
| vertical-align: baseline; | |
| font-size: 10px; } | |
| [dir] .tl-explicit .label, [dir] .tl-premium .label { | |
| background: transparent; | |
| padding-top: 2px; | |
| padding-bottom: 1px; | |
| border: 1px solid #614348; } | |
| .tl-number, | |
| .tl-time, | |
| .tl-listen-count { | |
| font-feature-settings: 'tnum'; | |
| letter-spacing: 0; } | |
| .tl-sort-asc::after, | |
| .tl-sort-desc::after { | |
| font-family: "glue-spoticon"; | |
| font-style: normal; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| line-height: inherit; | |
| vertical-align: bottom; | |
| color: #1db954; | |
| font-size: 14px; } | |
| [dir=ltr] .tl-sort-asc::after, [dir=ltr] .tl-sort-desc::after { | |
| margin-left: 4px; } | |
| [dir=rtl] .tl-sort-asc::after, [dir=rtl] .tl-sort-desc::after { | |
| margin-right: 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; } | |
| [dir] .tl-attention-highlight { | |
| border: 2px solid #4687d6; } | |
| .tl-attention-highlight.visible { | |
| transition: none; | |
| opacity: 1; } | |
| th[data-sort]:hover { | |
| color: #ffffff; } | |
| .pop-meter { | |
| width: 100%; | |
| height: 9px; | |
| position: relative; } | |
| .pop-meter-background, | |
| .pop-meter-overlay { | |
| width: 100%; | |
| position: absolute; | |
| top: -1px; | |
| height: 9px; | |
| overflow-x: hidden; } | |
| .pop-meter-background::after, | |
| .pop-meter-overlay::after { | |
| content: ' '; | |
| display: block; | |
| position: absolute; | |
| width: 2px; | |
| height: 8px; | |
| top: 0; } | |
| [dir] .pop-meter-background::after, [dir] .pop-meter-overlay::after { | |
| transform: translate(0, 0.5px); } | |
| [dir=ltr] .pop-meter-background::after, [dir=ltr] .pop-meter-overlay::after { | |
| left: -4px; } | |
| [dir=rtl] .pop-meter-background::after, [dir=rtl] .pop-meter-overlay::after { | |
| right: -4px; } | |
| [dir=ltr] .pop-meter-background::after { | |
| box-shadow: 4px 0 0 0 #614348, 8px 0 0 0 #614348, 12px 0 0 0 #614348, 16px 0 0 0 #614348, 20px 0 0 0 #614348, 24px 0 0 0 #614348, 28px 0 0 0 #614348, 32px 0 0 0 #614348, 36px 0 0 0 #614348, 40px 0 0 0 #614348, 44px 0 0 0 #614348, 48px 0 0 0 #614348; } | |
| [dir=rtl] .pop-meter-background::after { | |
| box-shadow: -4px 0 0 0 #614348, -8px 0 0 0 #614348, -12px 0 0 0 #614348, -16px 0 0 0 #614348, -20px 0 0 0 #614348, -24px 0 0 0 #614348, -28px 0 0 0 #614348, -32px 0 0 0 #614348, -36px 0 0 0 #614348, -40px 0 0 0 #614348, -44px 0 0 0 #614348, -48px 0 0 0 #614348; } | |
| [dir=ltr] .pop-meter-overlay::after { | |
| box-shadow: 4px 0 0 0 #a0a0a0, 8px 0 0 0 #a0a0a0, 12px 0 0 0 #a0a0a0, 16px 0 0 0 #a0a0a0, 20px 0 0 0 #a0a0a0, 24px 0 0 0 #a0a0a0, 28px 0 0 0 #a0a0a0, 32px 0 0 0 #a0a0a0, 36px 0 0 0 #a0a0a0, 40px 0 0 0 #a0a0a0, 44px 0 0 0 #a0a0a0, 48px 0 0 0 #a0a0a0; } | |
| [dir=rtl] .pop-meter-overlay::after { | |
| box-shadow: -4px 0 0 0 #a0a0a0, -8px 0 0 0 #a0a0a0, -12px 0 0 0 #a0a0a0, -16px 0 0 0 #a0a0a0, -20px 0 0 0 #a0a0a0, -24px 0 0 0 #a0a0a0, -28px 0 0 0 #a0a0a0, -32px 0 0 0 #a0a0a0, -36px 0 0 0 #a0a0a0, -40px 0 0 0 #a0a0a0, -44px 0 0 0 #a0a0a0, -48px 0 0 0 #a0a0a0; } | |
| /** | |
| * Standard Throbber | |
| * | |
| * There's two versions available, the standard one (50px) and one large (70px). | |
| * In IE9 there's no animation of the dots, just a grey symbol. | |
| * The throbbers doesn't scale with the container, they're a fixed size. | |
| * | |
| * Markup: | |
| * <div class="{$modifiers}"><div></div></div> | |
| * | |
| * .throbber - Your normal loading indicator (fetching content, etc) | |
| * .throbber-large - Bigger version, suitable for full screen loading and similar. | |
| * | |
| * Styleguide 100.1 | |
| */ | |
| @keyframes throbber-ltr { | |
| 7% { | |
| box-shadow: 0 -15px white, 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 14% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.8), 11.25px -11.25px 0 white, 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 21% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.6), 11.25px -11.25px 0 rgba(255, 255, 255, 0.8), 15px 0 0 white, 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 28% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.4), 11.25px -11.25px 0 rgba(255, 255, 255, 0.6), 15px 0 0 rgba(255, 255, 255, 0.8), 11.25px 11.25px 0 white, 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 35% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.4), 15px 0 0 rgba(255, 255, 255, 0.6), 11.25px 11.25px 0 rgba(255, 255, 255, 0.8), 0 15px 0 white, -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 42% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.4), 11.25px 11.25px 0 rgba(255, 255, 255, 0.6), 0 15px 0 rgba(255, 255, 255, 0.8), -11.25px 11.25px 0 white, -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 49% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.4), 0 15px 0 rgba(255, 255, 255, 0.6), -11.25px 11.25px 0 rgba(255, 255, 255, 0.8), -15px 0 0 white, -11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 56% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.4), -11.25px 11.25px 0 rgba(255, 255, 255, 0.6), -15px 0 0 rgba(255, 255, 255, 0.8), -11.25px -11.25px 0 white; } | |
| 63% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.4), -15px 0 0 rgba(255, 255, 255, 0.6), -11.25px -11.25px 0 rgba(255, 255, 255, 0.8); } | |
| 70% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.4), -11.25px -11.25px 0 rgba(255, 255, 255, 0.6); } | |
| 77% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.4); } | |
| 84% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 100% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } } | |
| @keyframes throbber-rtl { | |
| 7% { | |
| box-shadow: 0 -15px white, -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 14% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.8), -11.25px -11.25px 0 white, -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 21% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.6), -11.25px -11.25px 0 rgba(255, 255, 255, 0.8), -15px 0 0 white, -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 28% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.4), -11.25px -11.25px 0 rgba(255, 255, 255, 0.6), -15px 0 0 rgba(255, 255, 255, 0.8), -11.25px 11.25px 0 white, 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 35% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.4), -15px 0 0 rgba(255, 255, 255, 0.6), -11.25px 11.25px 0 rgba(255, 255, 255, 0.8), 0 15px 0 white, 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 42% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.4), -11.25px 11.25px 0 rgba(255, 255, 255, 0.6), 0 15px 0 rgba(255, 255, 255, 0.8), 11.25px 11.25px 0 white, 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 49% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.4), 0 15px 0 rgba(255, 255, 255, 0.6), 11.25px 11.25px 0 rgba(255, 255, 255, 0.8), 15px 0 0 white, 11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 56% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.4), 11.25px 11.25px 0 rgba(255, 255, 255, 0.6), 15px 0 0 rgba(255, 255, 255, 0.8), 11.25px -11.25px 0 white; } | |
| 63% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.4), 15px 0 0 rgba(255, 255, 255, 0.6), 11.25px -11.25px 0 rgba(255, 255, 255, 0.8); } | |
| 70% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.4), 11.25px -11.25px 0 rgba(255, 255, 255, 0.6); } | |
| 77% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.4); } | |
| 84% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } | |
| 100% { | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2); } } | |
| @keyframes throbberLarge-ltr { | |
| 7% { | |
| box-shadow: 0 -26px white, 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 14% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.8), 19.5px -19.5px 0 white, 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 21% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.6), 19.5px -19.5px 0 rgba(255, 255, 255, 0.8), 26px 0 0 white, 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 28% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.4), 19.5px -19.5px 0 rgba(255, 255, 255, 0.6), 26px 0 0 rgba(255, 255, 255, 0.8), 19.5px 19.5px 0 white, 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 35% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.4), 26px 0 0 rgba(255, 255, 255, 0.6), 19.5px 19.5px 0 rgba(255, 255, 255, 0.8), 0 26px 0 white, -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 42% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.4), 19.5px 19.5px 0 rgba(255, 255, 255, 0.6), 0 26px 0 rgba(255, 255, 255, 0.8), -19.5px 19.5px 0 white, -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 49% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.4), 0 26px 0 rgba(255, 255, 255, 0.6), -19.5px 19.5px 0 rgba(255, 255, 255, 0.8), -26px 0 0 white, -19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 56% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.4), -19.5px 19.5px 0 rgba(255, 255, 255, 0.6), -26px 0 0 rgba(255, 255, 255, 0.8), -19.5px -19.5px 0 white; } | |
| 63% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.4), -26px 0 0 rgba(255, 255, 255, 0.6), -19.5px -19.5px 0 rgba(255, 255, 255, 0.8); } | |
| 70% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.4), -19.5px -19.5px 0 rgba(255, 255, 255, 0.6); } | |
| 77% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.4); } | |
| 84% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 100% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } } | |
| @keyframes throbberLarge-rtl { | |
| 7% { | |
| box-shadow: 0 -26px white, -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 14% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.8), -19.5px -19.5px 0 white, -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 21% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.6), -19.5px -19.5px 0 rgba(255, 255, 255, 0.8), -26px 0 0 white, -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 28% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.4), -19.5px -19.5px 0 rgba(255, 255, 255, 0.6), -26px 0 0 rgba(255, 255, 255, 0.8), -19.5px 19.5px 0 white, 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 35% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.4), -26px 0 0 rgba(255, 255, 255, 0.6), -19.5px 19.5px 0 rgba(255, 255, 255, 0.8), 0 26px 0 white, 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 42% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.4), -19.5px 19.5px 0 rgba(255, 255, 255, 0.6), 0 26px 0 rgba(255, 255, 255, 0.8), 19.5px 19.5px 0 white, 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 49% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.4), 0 26px 0 rgba(255, 255, 255, 0.6), 19.5px 19.5px 0 rgba(255, 255, 255, 0.8), 26px 0 0 white, 19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 56% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.4), 19.5px 19.5px 0 rgba(255, 255, 255, 0.6), 26px 0 0 rgba(255, 255, 255, 0.8), 19.5px -19.5px 0 white; } | |
| 63% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.4), 26px 0 0 rgba(255, 255, 255, 0.6), 19.5px -19.5px 0 rgba(255, 255, 255, 0.8); } | |
| 70% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.4), 19.5px -19.5px 0 rgba(255, 255, 255, 0.6); } | |
| 77% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.4); } | |
| 84% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } | |
| 100% { | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2); } } | |
| .throbber { | |
| position: relative; | |
| height: 40px; | |
| width: 40px; } | |
| .throbber div { | |
| position: absolute; | |
| top: 50%; | |
| height: 8px; | |
| width: 8px; } | |
| [dir] .throbber div { | |
| background: transparent; | |
| border-radius: 50%; } | |
| [dir=ltr] .throbber div { | |
| left: 50%; | |
| margin: -4px 0 0 -4px; | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2); | |
| animation: throbber-ltr 1.5s ease infinite; } | |
| [dir=rtl] .throbber div { | |
| right: 50%; | |
| margin: -4px -4px 0 0; | |
| box-shadow: 0 -15px rgba(255, 255, 255, 0.2), -11.25px -11.25px 0 rgba(255, 255, 255, 0.2), -15px 0 0 rgba(255, 255, 255, 0.2), -11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 0 15px 0 rgba(255, 255, 255, 0.2), 11.25px 11.25px 0 rgba(255, 255, 255, 0.2), 15px 0 0 rgba(255, 255, 255, 0.2), 11.25px -11.25px 0 rgba(255, 255, 255, 0.2); | |
| animation: throbber-rtl 1.5s ease infinite; } | |
| .throbber-large { | |
| position: relative; | |
| height: 70px; | |
| width: 70px; } | |
| .throbber-large div { | |
| position: absolute; | |
| top: 50%; | |
| height: 12px; | |
| width: 12px; } | |
| [dir] .throbber-large div { | |
| background: transparent; | |
| border-radius: 50%; } | |
| [dir=ltr] .throbber-large div { | |
| left: 50%; | |
| margin: -6px 0 0 -6px; | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2); | |
| animation: throbberLarge-ltr 1.5s ease infinite; } | |
| [dir=rtl] .throbber-large div { | |
| right: 50%; | |
| margin: -6px -6px 0 0; | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2); | |
| animation: throbberLarge-rtl 1.5s ease infinite; } | |
| /** | |
| * Initial App Loading Throbber | |
| * | |
| * All apps should show the initial throbber in the center of the screen while the | |
| * app is initially loading. This throbber is the large size (automatically) and centered. | |
| * | |
| * Markup: | |
| * <div style="height: 300px; position: relative;"> | |
| * <div class="throbber-initial"><div></div></div> | |
| * </div> | |
| * | |
| * Styleguide 100.1.1 | |
| */ | |
| .throbber-initial { | |
| position: relative; | |
| height: 70px; | |
| width: 70px; | |
| position: absolute; | |
| top: 50%; } | |
| [dir] .throbber-initial { | |
| margin-top: -35px; } | |
| [dir=ltr] .throbber-initial { | |
| left: 50%; | |
| margin-left: -35px; } | |
| [dir=rtl] .throbber-initial { | |
| right: 50%; | |
| margin-right: -35px; } | |
| .throbber-initial div { | |
| position: absolute; | |
| top: 50%; | |
| height: 12px; | |
| width: 12px; } | |
| [dir] .throbber-initial div { | |
| background: transparent; | |
| border-radius: 50%; } | |
| [dir=ltr] .throbber-initial div { | |
| left: 50%; | |
| margin: -6px 0 0 -6px; | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2); | |
| animation: throbberLarge-ltr 1.5s ease infinite; } | |
| [dir=rtl] .throbber-initial div { | |
| right: 50%; | |
| margin: -6px -6px 0 0; | |
| box-shadow: 0 -26px rgba(255, 255, 255, 0.2), -19.5px -19.5px 0 rgba(255, 255, 255, 0.2), -26px 0 0 rgba(255, 255, 255, 0.2), -19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 0 26px 0 rgba(255, 255, 255, 0.2), 19.5px 19.5px 0 rgba(255, 255, 255, 0.2), 26px 0 0 rgba(255, 255, 255, 0.2), 19.5px -19.5px 0 rgba(255, 255, 255, 0.2); | |
| animation: throbberLarge-rtl 1.5s ease infinite; } | |
| /** | |
| * Error and Offline Pages | |
| * | |
| * Just put the markup at the top of the page. (Best to use the template from GLUE!) | |
| * To display simply add the class `.show-offline-screen` or `.show-error-screen` | |
| * to the containing element. <br><br> | |
| * <a class="button" href="error-and-offline.html">See demo!</a> | |
| * | |
| * CodeDisplay: $error-and-offline | |
| * | |
| * Styleguide 100.1 | |
| */ | |
| .error-and-offline { | |
| display: none; | |
| position: absolute; | |
| z-index: 1060; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; } | |
| [dir] .error-and-offline { | |
| text-align: center; | |
| background-image: url("https://d2j0f09xqmv212.cloudfront.net/images/error-bg.jpg"); | |
| background-size: cover; | |
| background-position: center; } | |
| [dir=ltr] .error-and-offline { | |
| left: 0; } | |
| [dir=rtl] .error-and-offline { | |
| right: 0; } | |
| .error-and-offline::before { | |
| content: ' '; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; } | |
| [dir] .error-and-offline::before { | |
| background-color: rgba(0, 0, 0, 0.7); } | |
| [dir=ltr] .error-and-offline::before { | |
| left: 0; | |
| right: 0; } | |
| [dir=rtl] .error-and-offline::before { | |
| right: 0; | |
| left: 0; } | |
| .error-and-offline > .container { | |
| position: relative; | |
| top: 50%; } | |
| [dir] .error-and-offline > .container { | |
| transform: translateY(-50%); } | |
| .error-and-offline .offline-content, | |
| .error-and-offline .error-content { | |
| display: none; } | |
| [dir] .error-and-offline .offline-content > .button, [dir] .error-and-offline .error-content > .button { | |
| margin-top: 32px; } | |
| .error-and-offline .error-version { | |
| position: absolute; | |
| bottom: 0; } | |
| [dir] .error-and-offline .error-version { | |
| margin: 0 7px; } | |
| [dir=ltr] .error-and-offline .error-version { | |
| right: 0; } | |
| [dir=rtl] .error-and-offline .error-version { | |
| left: 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; } | |
| .facepile { | |
| display: inline-block; | |
| height: 26px; | |
| width: 26px; } | |
| [dir] .facepile { | |
| margin: 0 2px; } | |
| [dir=ltr] .facepile { | |
| float: left; } | |
| [dir=rtl] .facepile { | |
| float: right; } | |
| .facepile-list { | |
| display: inline-block; | |
| height: 26px; } | |
| .facepile-list-container { | |
| height: 26px; } | |
| .facepile-badge { | |
| display: inline-block; | |
| height: 26px; | |
| width: 26px; | |
| height: 26px; | |
| line-height: 24px; | |
| color: #ffffff; | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); | |
| width: 26px; | |
| /* override btn stuff */ | |
| font-size: 10px; } | |
| [dir] .facepile-badge { | |
| margin: 0 2px; | |
| padding-top: 1px; | |
| border-radius: 13px; | |
| background: rgba(24, 24, 24, 0.7); | |
| transition-property: transform, box-shadow, color, background-color; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; | |
| padding: 0; } | |
| [dir=ltr] .facepile-badge { | |
| float: left; | |
| padding-left: 26px; | |
| padding-right: 26px; | |
| padding-left: 0; | |
| padding-right: 0; } | |
| [dir=rtl] .facepile-badge { | |
| float: right; | |
| padding-right: 26px; | |
| padding-left: 26px; | |
| padding-right: 0; | |
| padding-left: 0; } | |
| [dir] .facepile-badge .b-alt-text { | |
| margin-top: -24px; } | |
| [dir] .facepile-badge.contextmenu-active, [dir] .facepile-badge:not(:disabled):hover { | |
| background-color: rgba(24, 24, 24, 0.7); } | |
| .facepile-badge:not(:disabled):hover:active { | |
| color: #a0a0a0; } | |
| [dir] .facepile-badge:not(:disabled):hover:active { | |
| background: rgba(24, 24, 24, 0.7); | |
| transform: scale(1); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .facepile-badge:not(:disabled):hover:active { | |
| transform: scale(1); } } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .facepile-badge { | |
| transition-duration: 50ms; } } | |
| .facepile-badge::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0.7, 1); } | |
| [dir] .facepile-badge::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .facepile-badge::after { | |
| transition-duration: 50ms; } } | |
| .facepile-badge.contextmenu-active, .facepile-badge:not(:disabled):hover { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0, 1); } | |
| [dir] .facepile-badge.contextmenu-active, [dir] .facepile-badge:not(:disabled):hover { | |
| transition-property: transform, box-shadow, color, background-color; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .facepile-badge.contextmenu-active, [dir] .facepile-badge:not(:disabled):hover { | |
| transition-duration: 66ms; } } | |
| .facepile-badge.contextmenu-active::after, .facepile-badge:not(:disabled):hover::after { | |
| transition: none 33ms cubic-bezier(0.3, 0, 0, 1); } | |
| [dir] .facepile-badge.contextmenu-active::after, [dir] .facepile-badge:not(:disabled):hover::after { | |
| transition-property: box-shadow; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .facepile-badge.contextmenu-active::after, [dir] .facepile-badge:not(:disabled):hover::after { | |
| transition-duration: 66ms; } } | |
| .facepile-badge:not(:disabled):hover:active { | |
| transition: none; } | |
| .facepile-badge:not(:disabled):hover:active::after { | |
| transition: none; } | |
| .facepile-badge::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; } | |
| [dir] .facepile-badge::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px #b3b3b3; } | |
| [dir=ltr] .facepile-badge::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .facepile-badge::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .facepile-badge.contextmenu-active, [dir] .facepile-badge:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px transparent; } | |
| [dir] .facepile-badge.contextmenu-active::after, [dir] .facepile-badge:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .facepile-badge.contextmenu-active, [dir] .facepile-badge:not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px #ffffff; } | |
| [dir] .facepile-badge.contextmenu-active::after, [dir] .facepile-badge:not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px #ffffff; } } | |
| [dir] .facepile-badge:not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .facepile-badge:not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px #535353; } | |
| [dir] .facepile-badge.contextmenu-active, [dir] .facepile-badge:not(:disabled):hover { | |
| transform: scale(1.07692); } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .facepile-badge.contextmenu-active, [dir] .facepile-badge:not(:disabled):hover { | |
| transform: scale(1.07692); } } | |
| .facepile-badge::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; | |
| line-height: 26px; | |
| font-size: 13px; | |
| width: calc(100% - 6.5px); } | |
| [dir] .facepile-badge::before { | |
| border-radius: 500px; } | |
| [dir=ltr] .facepile-badge::before { | |
| left: 0; | |
| right: 0; | |
| text-align: left; | |
| padding-left: 6.5px; } | |
| [dir=rtl] .facepile-badge::before { | |
| right: 0; | |
| left: 0; | |
| text-align: right; | |
| padding-right: 6.5px; } | |
| .facepile-badge.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: 13px; | |
| line-height: 26px; } | |
| [dir] .facepile-badge.button-play.playing:not(:hover), [dir] .tl-row.playing .facepile-badge.button-play:not(:hover), [dir] .card.playing .facepile-badge.button-play:not(:hover) { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| .facepile-badge.button-play.playing:not(:hover)::after, | |
| .tl-row.playing .facepile-badge.button-play:not(:hover)::after, | |
| .card.playing .facepile-badge.button-play:not(:hover)::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; } | |
| [dir] .facepile-badge.button-play.playing:not(:hover)::after, [dir] .tl-row.playing .facepile-badge.button-play:not(:hover)::after, [dir] .card.playing .facepile-badge.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .facepile-badge.button-play.playing:not(:hover)::after, [dir=ltr] .tl-row.playing .facepile-badge.button-play:not(:hover)::after, [dir=ltr] .card.playing .facepile-badge.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .facepile-badge.button-play.playing:not(:hover)::after, [dir=rtl] .tl-row.playing .facepile-badge.button-play:not(:hover)::after, [dir=rtl] .card.playing .facepile-badge.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .facepile-badge.button-play.playing:not(:hover).contextmenu-active, [dir] .facepile-badge.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .facepile-badge.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .facepile-badge.button-play:not(:hover).contextmenu-active, [dir] .card.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent; } | |
| [dir] .facepile-badge.button-play.playing:not(:hover).contextmenu-active::after, [dir] .facepile-badge.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .facepile-badge.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .facepile-badge.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .facepile-badge.button-play.playing:not(:hover).contextmenu-active, [dir] .facepile-badge.button-play.playing:not(:hover):not(:disabled):hover, [dir] .tl-row.playing .facepile-badge.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing .facepile-badge.button-play:not(:hover).contextmenu-active, [dir] .card.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .facepile-badge.button-play.playing:not(:hover).contextmenu-active::after, [dir] .facepile-badge.button-play.playing:not(:hover):not(:disabled):hover::after, [dir] .tl-row.playing .facepile-badge.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing .facepile-badge.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .facepile-badge.button-play.playing:not(:hover):not(:disabled):hover:active, [dir] .tl-row.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .facepile-badge.button-play.playing:not(:hover):not(:disabled):hover:active::after, [dir] .tl-row.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .card.playing .facepile-badge.button-play:not(:hover):not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| .facepile-badge.button-play.playing:not(:hover)::before, | |
| .tl-row.playing .facepile-badge.button-play:not(:hover)::before, | |
| .card.playing .facepile-badge.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: 13px; | |
| line-height: 26px; } | |
| .facepile-badge.button-play.playing:hover::before, | |
| .tl-row.playing .facepile-badge.button-play:hover::before, | |
| .card.playing .facepile-badge.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: 13px; | |
| line-height: 26px; } | |
| [dir] .tl-row.playing.facepile-badge.button-play:not(:hover), [dir] .card.playing.facepile-badge.button-play:not(:hover) { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| .tl-row.playing.facepile-badge.button-play:not(:hover)::after, | |
| .card.playing.facepile-badge.button-play:not(:hover)::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; } | |
| [dir] .tl-row.playing.facepile-badge.button-play:not(:hover)::after, [dir] .card.playing.facepile-badge.button-play:not(:hover)::after { | |
| border-radius: 500px; | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir=ltr] .tl-row.playing.facepile-badge.button-play:not(:hover)::after, [dir=ltr] .card.playing.facepile-badge.button-play:not(:hover)::after { | |
| right: 0; | |
| left: 0; } | |
| [dir=rtl] .tl-row.playing.facepile-badge.button-play:not(:hover)::after, [dir=rtl] .card.playing.facepile-badge.button-play:not(:hover)::after { | |
| left: 0; | |
| right: 0; } | |
| [dir] .tl-row.playing.facepile-badge.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.facepile-badge.button-play:not(:hover).contextmenu-active, [dir] .card.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.facepile-badge.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.facepile-badge.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| @media (-webkit-min-device-pixel-ratio: 2) { | |
| [dir] .tl-row.playing.facepile-badge.button-play:not(:hover).contextmenu-active, [dir] .tl-row.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover, [dir] .card.playing.facepile-badge.button-play:not(:hover).contextmenu-active, [dir] .card.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.facepile-badge.button-play:not(:hover).contextmenu-active::after, [dir] .tl-row.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover::after, [dir] .card.playing.facepile-badge.button-play:not(:hover).contextmenu-active::after, [dir] .card.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover::after { | |
| box-shadow: inset 0 0 0 1px transparent; } } | |
| [dir] .tl-row.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover:active, [dir] .card.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover:active { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| [dir] .tl-row.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover:active::after, [dir] .card.playing.facepile-badge.button-play:not(:hover):not(:disabled):hover:active::after { | |
| box-shadow: inset 0 0 0 1px transparent; } | |
| .tl-row.playing.facepile-badge.button-play:not(:hover)::before, | |
| .card.playing.facepile-badge.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: 13px; | |
| line-height: 26px; } | |
| .tl-row.playing.facepile-badge.button-play:hover::before, | |
| .card.playing.facepile-badge.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: 13px; | |
| line-height: 26px; } | |
| .facepile-text { | |
| line-height: 29px; } | |
| [dir=ltr] .facepile-text { | |
| float: left; | |
| margin-right: 10px; } | |
| [dir=rtl] .facepile-text { | |
| float: right; | |
| margin-left: 10px; } | |
| @media (max-width: 820px) { | |
| .header-album .facepile-list-container { | |
| display: none; } } | |
| @media (max-width: 940px) { | |
| .header .facepile-text { | |
| display: none; } } | |
| [dir] .navbar .facepile-list { | |
| margin-top: 8px; } | |
| .h-bar-facepile { | |
| white-space: normal; } | |
| .header-album .facepile-list-container { | |
| bottom: 16px; | |
| position: absolute; } | |
| [dir=ltr] .header-album .facepile-list-container { | |
| right: 20px; } | |
| [dir=rtl] .header-album .facepile-list-container { | |
| left: 20px; } | |
| .interaction-debug.interaction-debug-wireframes { | |
| /* | |
| 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. | |
| */ } | |
| [dir] .interaction-debug.interaction-debug-wireframes [data-interaction-target], [dir] .interaction-debug.interaction-debug-wireframes a[data-interaction-target] { | |
| border: 3px solid red !important; } | |
| [dir] .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; } | |
| [dir] .interaction-debug.interaction-debug-wireframes [data-interaction-context]::before { | |
| background: gray !important; | |
| padding: 4px !important; } | |
| [dir=ltr] .interaction-debug.interaction-debug-wireframes [data-interaction-context]::before { | |
| left: -15px !important; } | |
| [dir=rtl] .interaction-debug.interaction-debug-wireframes [data-interaction-context]::before { | |
| right: -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; } | |
| [dir] .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; } | |
| [dir] .interaction-debug.interaction-debug-wireframes [data-interaction-list] > *::before { | |
| background: gray !important; | |
| padding: 4px !important; } | |
| [dir=ltr] .interaction-debug.interaction-debug-wireframes [data-interaction-list] > *::before { | |
| left: -15px !important; } | |
| [dir=rtl] .interaction-debug.interaction-debug-wireframes [data-interaction-list] > *::before { | |
| right: -15px !important; } | |
| .interaction-debug.interaction-debug-wireframes [data-interaction-list] > *:first-child::before { | |
| counter-increment: none !important; } | |
| [dir] .interaction-debug.interaction-debug-wireframes a:not([data-interaction-target]) { | |
| border: 3px solid #a0940e !important; } | |
| [dir] .interaction-debug.interaction-debug-wireframes button:not([data-interaction-target]) { | |
| border: 3px solid #a0940e !important; } | |
| [dir] .interaction-debug.interaction-debug-wireframes [data-sort]:not([data-interaction-target]) { | |
| border: 3px solid #a0940e !important; } | |
| [dir] .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; } | |
| [dir] .interaction-debug.interaction-debug-wireframes .navbar.sticky-top { | |
| background-color: #614348 !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; } | |
| [dir=ltr] .interaction-debug.interaction-debug-wireframes .row { | |
| margin-left: 0 !important; | |
| margin-right: 0 !important; } | |
| [dir=rtl] .interaction-debug.interaction-debug-wireframes .row { | |
| margin-right: 0 !important; | |
| margin-left: 0 !important; } | |
| [dir=ltr] .interaction-debug .interaction-debug-top-level { | |
| padding-right: 300px; } | |
| [dir=rtl] .interaction-debug .interaction-debug-top-level { | |
| padding-left: 300px; } | |
| .interaction-debug .interaction-debugger-panel-root { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 300px; | |
| word-break: break-word; } | |
| [dir=ltr] .interaction-debug .interaction-debugger-panel-root { | |
| right: 0; } | |
| [dir=rtl] .interaction-debug .interaction-debugger-panel-root { | |
| left: 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; } | |
| [dir] .interaction-debug .highlight-overlay { | |
| background: red; } | |
| .interaction-debug .interaction-debugger-panel { | |
| position: absolute; | |
| user-select: text; } | |
| [dir] .interaction-debug .interaction-debugger-panel { | |
| padding: 0 3px; } | |
| [dir=ltr] .interaction-debug .interaction-debugger-panel { | |
| right: 0; } | |
| [dir=rtl] .interaction-debug .interaction-debugger-panel { | |
| left: 0; } | |
| .interaction-debug .key-value-pair { | |
| font-weight: bold; | |
| color: #fff; } | |
| .interaction-debug .key-value-pair span { | |
| color: #f00; } | |
| [dir] .interaction-debug .debug-section { | |
| margin-top: 40px; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey there, soo..... how do you use it??? the .spa files are obfuscated or something