/*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ /*! * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=35378cd201a131f69c68a64bc4438544) * Config saved to config.json and https://gist.github.com/35378cd201a131f69c68a64bc4438544 */ @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } @media (min-width: 1500px) { .container { width: 1450px; } } .row { margin-left: -16px; margin-right: -16px; } .container:after, .row:after { clear: both; } .hide { display: none !important; } .show { display: block !important; } .hidden { display: none !important; } .lyrics-lyricsContainer-LyricsContainer { display: grid; grid-template-rows: 1fr; position: absolute; height: 100%; width: 100%; top: 0; } .lyrics-lyricsContainer-Loading { align-self: center; grid-area: 1/1/-1/-1; } .lyrics-lyricsContainer-LyricsUnavailablePage { align-items: center; color: var(--lyrics-color-inactive); display: flex; grid-area: 1/1/-1/-1; height: 100%; justify-content: center; padding: 20px; font-size: 88px; letter-spacing: 0.1em; font-weight: 700; } .lyrics-lyricsContainer-UnsyncedLyricsPage { grid-area: 1/1/-1/-1; grid-template-rows: 1fr 20px; user-select: text; text-align: var(--lyrics-align-text); } .lyrics-lyricsContainer-LyricsUnsyncedPadding { display: flex; /* 2 padding blocks & 1 line height & Provider block */ height: calc(50vh - 91px - 8px - var(--lyrics-font-size)); } .lyrics-lyricsContainer-UnsyncedLyricsPage:has(.lyrics-versionSelector, .lyrics-lyricsContainer-LyricsLine:nth-child(4)) .lyrics-lyricsContainer-LyricsUnsyncedPadding { height: 10vh; } .lyrics-lyricsContainer-SyncedLyricsPage { display: grid; grid-area: 1/1/-1/-1; grid-template-rows: 1fr 30px; overflow: hidden; text-align: var(--lyrics-align-text); user-select: text; } .lyrics-lyricsContainer-LyricsBackground { background-color: var(--lyrics-color-background); background-image: var(--lyrics-background-noise); grid-area: 1/1/-1/-1; transition: background-color 0.25s ease-out; } .lyrics-lyricsContainer-Provider { align-self: end; color: var(--lyrics-color-inactive); grid-area: 2/1/-1/-1; justify-self: stretch; height: 25px; overflow: hidden; background: linear-gradient(0deg, var(--lyrics-color-background) 30%, transparent); z-index: 1; padding: 60px 20px 30px; pointer-events: none; } .lyrics-lyricsContainer-SyncedLyrics { --lyrics-line-height: calc(4px + var(--lyrics-font-size)); grid-area: 1/1/-2/-1; height: 0; } .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine { transform: translateY(calc(var(--position-index) * var(--lyrics-line-height) + var(--offset))); transform-origin: var(--lyrics-align-text); transition-timing-function: cubic-bezier(0, 0, 0.58, 1); transition-duration: calc(var(--animation-index) * var(--animation-tempo) + 0.1s); transition-property: transform, color, opacity; } .lyrics-lyricsContainer-LyricsContainer.blur-enabled .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine { filter: blur(calc(var(--blur-index) * 1.5px)); } .lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine a { color: var(--lyrics-color-active); } .lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine { color: var(--lyrics-color-inactive); transition: color 0.25s cubic-bezier(0, 0, 0.58, 1); } .lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine-active { color: var(--lyrics-color-active); } .lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine:hover { color: var(--lyrics-color-active); } .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine { color: var(--lyrics-color-inactive); } .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine:hover { color: var(--lyrics-color-active); } .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine.lyrics-lyricsContainer-LyricsLine-active { color: var(--lyrics-color-active); opacity: 1; transform: translateY(calc(var(--position-index) * var(--lyrics-line-height) + var(--offset))) scale(1.1); filter: none !important; } .lyrics-lyricsContainer-SyncedLyrics > .lyrics-lyricsContainer-LyricsLine-paddingLine { opacity: 0; pointer-events: none; } .lyrics-lyricsContainer-LyricsLine, .lyrics-versionSelector { margin-left: 100px; margin-right: 100px; } @media (min-width: 1024px) { .lyrics-lyricsContainer-LyricsLine, .lyrics-versionSelector { margin-left: 150px; margin-right: 150px; } } @media (min-width: 1280px) { .lyrics-lyricsContainer-LyricsLine, .lyrics-versionSelector { margin-left: 200px; margin-right: 200px; } } .lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine { font-size: var(--lyrics-font-size); font-weight: 700; letter-spacing: -0.04em; line-height: calc(12px + var(--lyrics-font-size)); } .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine { font-size: var(--lyrics-font-size); font-weight: 700; letter-spacing: -0.04em; line-height: var(--lyrics-line-height); } @media (min-width: 1280px) { .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine { font-weight: 900; } } .lyrics-tabBar-headerItem { -webkit-app-region: no-drag; display: inline-block; pointer-events: auto; } .lyrics-tabBar-headerItemLink { margin: 0 8px 0 0; } .lyrics-tabBar-active { background-color: var(--spice-tab-active); border-radius: 4px; } .lyrics-tabBar-headerItemLink { border-radius: 4px; color: var(--spice-text); display: inline-block; margin: 0 8px; padding: 8px 16px; position: relative; text-decoration: none !important; cursor: pointer; } .lyrics-tabBar-headerItemLink .main-type-mestoBold { text-transform: capitalize; } .lyrics-tabBar-headerItemLink-locked::before { content: "• "; } .lyrics-tabBar-nav { -webkit-app-region: drag; pointer-events: none; width: 100%; } .lyrics-tabBar-header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; } .lyrics-tabBar-headerItem .optionsMenu-dropBox { color: var(--spice-text); border: 0; max-width: 150px; height: 42px; padding: 0 30px 0 12px; background-color: initial; cursor: pointer; appearance: none; } .lyrics-tabBar-headerItem .optionsMenu-dropBox svg { position: absolute; margin-left: 8px; } #lyrics-plus-config-container option { background-color: var(--spice-button); } div.lyrics-tabBar-headerItemLink { padding: 0; } .lyrics-tabBar-header button.switch { margin-inline-end: 12px; margin-inline-start: 0; } .lyrics-lyricsContainer-Karaoke-WordActive { color: var(--lyrics-color-active) !important; } .lyrics-lyricsContainer-Karaoke-Word { color: var(--lyrics-color-inactive); transition: var(--word-duration) color ease; } .lyrics-lyricsContainer-LyricsLine a { background-color: transparent; transition: background-color 0.25s cubic-bezier(0, 0, 0, 1); } .lyrics-lyricsContainer-LyricsLine a.fetched { background-color: var(--lyrics-highlight-background); } .lyrics-lyricsContainer-LyricsLine a, .lyrics-lyricsContainer-LyricsLine a:hover { text-decoration: none !important; } .lyrics-lyricsContainer-LyricsLine a:hover { border-bottom: 2px solid var(--lyrics-color-active); } .lyrics-Genius-noteTextContainer { font-size: 18px; font-weight: 400; letter-spacing: normal; line-height: 24px; text-transform: none; padding: 25px; background-color: var(--lyrics-color-active); border-radius: 3px; color: var(--lyrics-highlight-background); box-shadow: 0 10px 15px 5px rgb(0, 0, 0, 0.2); cursor: default; text-align: left; } .lyrics-Genius-divider { /* border-bottom: 3px solid var(--lyrics-color-active); */ line-height: 0; margin-left: var(--link-left); } .lyrics-Searchbar { position: sticky; width: 300px; height: 40px; bottom: 10px; display: flex; background-color: var(--lyrics-color-active) !important; color: var(--lyrics-highlight-background); margin-left: 10px; border-radius: 3px; box-shadow: 0 10px 15px 5px rgb(0, 0, 0, 0.2); } .lyrics-Searchbar input { width: 300px; height: 40px; bottom: 10px; border: 0; color: var(--lyrics-highlight-background) !important; padding: 0 36px; } .lyrics-Searchbar svg { position: absolute; left: 0; height: 40px; margin-left: 10px; } .lyrics-Searchbar span { position: relative; right: 0; line-height: 40px; margin-right: 10px; font-weight: 400; font-size: 16px; letter-spacing: 0.2em; } .lyrics-Searchbar-highlight { position: fixed; width: 100%; height: var(--search-highlight-height); left: 0; top: var(--search-highlight-top); background-color: var(--lyrics-highlight-background); opacity: 0.5; pointer-events: none; } .lyrics-versionSelector { max-width: 500px; border-radius: 4px; display: inline-block; position: relative; cursor: pointer; box-shadow: 0 10px 15px 5px rgb(0, 0, 0, 0.2); background-color: var(--lyrics-highlight-background); margin-bottom: 75px; } .lyrics-versionSelector select { border: 0; border-radius: 4px; max-width: 500px; height: 42px; padding: 0 30px 0 12px; background-color: initial; cursor: pointer; appearance: none; font-size: 18px; background-color: var(--lyrics-color-active); color: var(--lyrics-highlight-background); } .lyrics-versionSelector option { background-color: var(--lyrics-color-active); } .lyrics-versionSelector svg { position: absolute; height: 42px; right: 10px; pointer-events: none; fill: var(--lyrics-highlight-background); } /** Setting menu */ .lyrics-tooltip-wrapper .setting-row::after, #lyrics-plus-config-container .setting-row::after { content: ""; display: table; clear: both; } .lyrics-tooltip-wrapper .setting-row .col, #lyrics-plus-config-container .setting-row .col { padding: 16px 0 4px; align-items: center; } .lyrics-tooltip-wrapper .setting-row .col.description, #lyrics-plus-config-container .setting-row .col.description { float: left; padding-right: 15px; cursor: default; } .lyrics-tooltip-wrapper .setting-row .col.action, #lyrics-plus-config-container .setting-row .col.action { float: right; display: flex; justify-content: flex-end; align-items: center; } .lyrics-tooltip-wrapper button.switch, #lyrics-plus-config-container button.switch { align-items: center; border: 0px; border-radius: 50%; background-color: rgba(var(--spice-rgb-shadow), 0.7); color: var(--spice-text); cursor: pointer; margin-inline-start: 12px; padding: 8px; width: 32px; height: 32px; } .lyrics-tooltip-wrapper button.switch.disabled, .lyrics-tooltip-wrapper button.switch[disabled], #lyrics-plus-config-container button.switch.disabled, #lyrics-plus-config-container button.switch[disabled] { color: rgba(var(--spice-rgb-text), 0.3); } .lyrics-tooltip-wrapper button.switch.small, #lyrics-plus-config-container button.switch.small { width: 22px; height: 22px; padding: 3px; } .lyrics-tooltip-wrapper input, #lyrics-plus-config-container input { width: 100%; margin-top: 10px; padding: 0 5px; height: 32px; border: 0; color: var(--spice-text); background-color: initial; border-bottom: 1px solid var(--spice-text); } .lyrics-tooltip-wrapper .col.action .adjust-value, #lyrics-plus-config-container .col.action .adjust-value { margin-inline-start: 12px; min-width: 22px; text-align: center; } .lyrics-tooltip-wrapper .col.action span, #lyrics-plus-config-container .col.action span { font-size: 14px; opacity: 0.8; } .lyrics-tooltip-wrapper .col.action .btn, #lyrics-plus-config-container .col.action .btn { font-weight: 700; background-color: transparent; border-radius: 500px; transition-duration: 33ms; transition-property: background-color, border-color, color, box-shadow, filter, transform; padding-inline: 15px; border: 1px solid #727272; color: var(--spice-text); min-block-size: 32px; cursor: pointer; } .lyrics-tooltip-wrapper .col.action .btn:hover, #lyrics-plus-config-container .col.action .btn:hover { transform: scale(1.04); border-color: var(--spice-text); } .lyrics-tooltip-wrapper .col.action .btn:disabled, #lyrics-plus-config-container .col.action .btn:disabled { opacity: 0.5; cursor: not-allowed; } .lyrics-tooltip-wrapper .col.action .main-dropDown-dropDown, .lyrics-tooltip-wrapper .col.action input, #lyrics-plus-config-container .col.action .main-dropDown-dropDown, #lyrics-plus-config-container .col.action input { width: 150px; } #lyrics-fullscreen-container { position: fixed; width: 100vw; height: 100vh; cursor: default; left: 0; top: 0; } #lyrics-fullscreen-container .lyrics-lyricsContainer-LyricsContainer { height: 100vh; margin-bottom: 0; margin-top: 0; overflow-y: auto; } #lyrics-fullscreen-container .lyrics-lyricsContainer-LyricsContainer::-webkit-scrollbar { background-color: var(--lyrics-color-background); } .lyrics-lyricsContainer-LyricsContainer.fad-enabled { height: 100vh; margin-top: 0; margin-bottom: 0; overflow-y: scroll; } .lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-LyricsLine { margin-left: 100px; margin-right: 100px; } .lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-LyricsBackground, .lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-Provider { display: none; } .lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-SyncedLyricsPage { width: 100%; } .lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-config-button-container { opacity: 0; transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1); } .lyrics-lyricsContainer-LyricsContainer.fad-enabled:hover .lyrics-config-button-container { opacity: 1; } .lyrics-idling-indicator { display: inline-block; opacity: 1; transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1); } .lyrics-idling-indicator-hidden { opacity: 0; } .lyrics-idling-indicator__circle { background-color: var(--lyrics-color-active); border-radius: 50%; display: inline-block; opacity: 0.5; margin-right: calc(var(--lyrics-font-size) / 4); transform-origin: center; transition-timing-function: linear; transition-duration: var(--indicator-delay); transition-property: transform, opacity; height: var(--lyrics-font-size); width: var(--lyrics-font-size); transform: scale(0.5); } .lyrics-idling-indicator__circle.active { opacity: 1; transform: scale(0.7); } .lyrics-config-button-container { -webkit-margin-end: 32px; -webkit-box-pack: end; pointer-events: none; bottom: 32px; display: flex; justify-content: flex-end; margin: -52px 0 0; margin-inline-end: 32px; position: sticky; z-index: 2; } .lyrics-config-button-container > * { pointer-events: auto; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } .lyrics-config-button { align-items: center; background-color: rgba(0, 0, 0, 0.5); border: 0; margin: 5px; border-radius: 4px; color: #eee; cursor: pointer; display: flex; gap: 8px; justify-content: center; padding: 12px; height: 40px; width: 40px; } .lyrics-config-button-container .main-contextMenu-menu { color: var(--spice-text); padding: 12px 12px 6px; } .lyrics-lyricsContainer-UnsyncedLyricsPage .split { display: flex; } .lyrics-lyricsContainer-UnsyncedLyricsPage .split > div { flex: 50%; } .lyrics-lyricsContainer-UnsyncedLyricsPage .split > div > div:not(.lyrics-versionSelector) { margin-left: 0; margin-right: 0; } .split .lyrics-lyricsContainer-LyricsLine { padding-left: 50px; padding-right: 50px; } .split .lyrics-versionSelector { margin-right: 50px; margin-left: 50px; } .split .lyrics-versionSelector select { width: 100%; } @media (min-width: 1024px) { .split .lyrics-lyricsContainer-LyricsLine { padding-left: 75px; padding-right: 75px; } .split .lyrics-versionSelector { margin-right: 75px; margin-left: 75px; } } @media (min-width: 1280px) { .split .lyrics-lyricsContainer-LyricsLine { padding-left: 100px; padding-right: 100px; } .split .lyrics-versionSelector { margin-right: 100px; margin-left: 100px; } }