.marketplace-header { -webkit-box-pack: justify; -webkit-box-align: center; align-content: space-between; align-items: center; color: var(--spice-text); display: flex; justify-content: space-between; margin: 16px 0; position: sticky; flex-direction: row-reverse; top: 80px; z-index: 1; } .marketplace-header h1 { position: fixed; left: 16px; } @media (min-width: 1024px) { .marketplace-header h1 { left: 32px; } } .marketplace-header__right { display: flex; } .marketplace-sort-bar { align-items: center; display: flex; } .marketplace-sort-container { position: relative; display: flex; } .marketplace-tabBar-headerItem { -webkit-app-region: no-drag; display: inline-block; pointer-events: auto; } .marketplace-tabBar-active { background-color: var(--spice-tab-active); border-radius: 4px; } .marketplace-tabBar-headerItemLink { border-radius: 4px; color: var(--spice-text); display: inline-block; margin: 0 8px 0 0; padding: 8px 16px; position: relative; text-decoration: none !important; cursor: pointer; } .marketplace-tabBar-nav { -webkit-app-region: drag; pointer-events: none; width: 100%; } .marketplace-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; } .marketplace-tabBar-headerItem .optionsMenu-dropBox svg { position: absolute; margin-left: 8px; } .marketplace-settings-button { border-radius: 4px; color: var(--spice-text); display: inline-block; padding: 10px 14px 6px; margin-left: 8px; position: relative; text-decoration: none !important; cursor: pointer; background-color: transparent; border: none; background-color: var(--spice-sidebar); } .marketplace-settings-button:hover { background-color: var(--spice-tab-active); } .searchbar--bar__wrapper { display: flex; flex-direction: column; align-items: flex-end; flex-grow: 1; } .searchbar-bar { border: unset; background-color: var(--spice-sidebar) !important; border-radius: 5px !important; padding-left: 10px; padding-right: 10px; color: var(--spice-text) !important; z-index: 1000; } .marketplace-sort-container .optionsMenu-dropBox { grid-gap: 8px; align-items: center; background-color: var(--spice-sidebar); border-radius: 4px; display: grid; grid-template-columns: 1fr 16px; color: rgba(var(--spice-rgb-text), 0.7); border: 0; height: 32px; margin-left: 8px; padding: 0 8px 0 12px; } .marketplace-sort-container .optionsMenu-dropBox:hover { color: var(--spice-text); } option { background-color: var(--spice-button); } .marketplace-add-snippet-btn { position: fixed; bottom: 32px; right: 32px; } .marketplace-card-type-heading { margin: 1em 0 0.5em; color: var(--spice-subtext); font-size: 1.3em; } .marketplace-grid .main-card-draggable { display: flex; flex-direction: column; } .marketplace-grid .main-card-draggable .main-card-cardMetadata { flex-grow: 1; display: flex; flex-direction: column; } .marketplace-grid .main-card-draggable .main-card-cardMetadata .marketplace-card__author ~ .marketplace-card__author::before { content: ", "; } .marketplace-grid .main-card-draggable .main-card-cardMetadata ul.marketplace-card__tags { display: flex; flex-wrap: wrap; gap: 8px; } .marketplace-grid .main-card-draggable .main-card-cardMetadata li.marketplace-card__tag { background-color: var(--spice-tab-active); border-radius: 4px; padding: 0px 9px 2px; } .marketplace-grid .main-card-draggable .main-card-cardMetadata li.marketplace-card__tag[data-tag="external JS"] { background-color: #dc3838; color: #fff; } .marketplace-grid .main-card-draggable .main-card-cardMetadata li.marketplace-card__tag[data-tag=dark] { background-color: #000; color: #fff; } .marketplace-grid .main-card-draggable .main-card-cardMetadata li.marketplace-card__tag[data-tag=light] { background-color: #fff; color: #333; } .marketplace-grid .main-card-draggable .main-card-cardMetadata .marketplace-card__tags-more-btn { background-color: var(--spice-tab-active); border-radius: 4px; padding: 0px 9px 2px; margin-top: 8px; border: none; } .marketplace-grid .main-card-draggable .main-card-cardMetadata .marketplace-card__tags-more-btn:hover, .marketplace-grid .main-card-draggable .main-card-cardMetadata .marketplace-card__tags-more-btn:focus { filter: brightness(1.4); } .marketplace-grid .main-card-draggable .main-card-cardMetadata .marketplace-card-desc { font: -webkit-small-control; margin: 12px 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .marketplace-grid .main-card-draggable .main-card-cardMetadata .marketplace-card__bottom-meta { margin-top: auto; margin-bottom: 0; } .marketplace-grid .main-card-draggable .main-card-cardMetadata .marketplace-card__bottom-meta + .marketplace-card__bottom-meta { margin-top: 8px; } .marketplace-grid[data-tab=Installed]:empty::after { content: "No installed extensions"; display: block; } .main-cardImage-imageWrapper--error::before { content: ""; display: block; position: absolute; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; height: 100%; width: 100%; background-color: var(--spice-subtext); filter: brightness(50%); /* https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path */ /* https://icons8.com/icons/set/box */ clip-path: path("M41.20833,21.5c-2.54758,0.00136 -4.90298,1.35492 -6.18685,3.55534l-12.54167,21.5c-0.64062,1.09578 -0.97875,2.34203 -0.97982,3.61133v86c0,7.83362 6.49972,14.33333 14.33333,14.33333h100.33333c7.83362,0 14.33333,-6.49972 14.33333,-14.33333v-86c-0.00107,-1.2693 -0.3392,-2.51555 -0.97982,-3.61133l-12.54167,-21.5c-1.28387,-2.20042 -3.63926,-3.55398 -6.18685,-3.55534zM45.32357,35.83333h81.35286l8.35645,14.33333h-98.06576zM35.83333,64.5h100.33333v71.66667h-100.33333zM64.5,78.83333v14.33333h43v-14.33333z"); clip-rule: nonzero; transform: scale(0.5); } .main-cardImage-imageWrapper--error { box-shadow: none; } .main-card-card:hover .main-cardImage-imageWrapper--error::before { filter: brightness(100%); } .marketplace-cardSubHeader, .marketplace-card__bottom-meta { margin-top: 4px; white-space: normal; color: var(--spice-subtext); } .marketplace-cardSubHeader { display: flex; flex-direction: column; gap: 8px; } .marketplace-card--snippet .main-card-imageContainer { display: none; } .marketplace-card--installed { flex: 0 !important; -webkit-box-flex: 0 !important; border: 1px solid var(--spice-button); } .GenericModal[aria-label=Marketplace] .main-embedWidgetGenerator-container { background-color: var(--spice-tab-active); } .GenericModal[aria-label=Marketplace] .x-toggle-wrapper { cursor: pointer; margin-inline-start: 12px; } .GenericModal[aria-label=Marketplace] .x-toggle-wrapper.disabled { opacity: 0; pointer-events: none; } .setting-row::after { content: ""; display: table; clear: both; } .setting-row .col { display: flex; padding: 10px 0; align-items: center; } .setting-row .col.description { float: left; padding-right: 15px; cursor: default; } .setting-row .col.action { float: right; text-align: right; } button.arrow-btn { align-items: center; border: 0px; border-radius: 50%; background-color: rgba(var(--spice-rgb-shadow), 0.7); color: var(--spice-text); cursor: pointer; display: flex; margin-inline-start: 12px; padding: 8px; } button.arrow-btn.small { width: 24px; height: 24px; padding: 5px; } button.arrow-btn.disabled, button.arrow-btn[disabled] { color: rgba(var(--spice-rgb-text), 0.3); } #marketplace-add-snippet-container input, textarea { width: 100%; margin-bottom: 10px; padding: 3px 5px; background-color: var(--spice-main); color: var(--spice-text); font-size: 14px; border: 1px solid var(--spice-button); border-radius: 4px; } /* Need to hijack height because .GenericModal has it set to 90% via style attr... */ .GenericModal[aria-label="Reload required"] { height: 240px !important; } .marketplace-reload-modal__button-container { display: flex; justify-content: center; padding-top: 18px; } .marketplace-reload-modal__button-container button { margin: 18px; padding: 8px 24px; } #marketplace-add-snippet-container { display: flex; flex-direction: column; gap: 16px; } #marketplace-add-snippet-container input, #marketplace-add-snippet-container textarea { width: 100%; margin-bottom: 10px; padding: 3px 5px; background-color: var(--spice-main); color: var(--spice-text); font-size: 14px; border: 1px solid var(--spice-button); border-radius: 4px; } .marketplace-customCSS-input-container { display: flex; flex-direction: column; } #marketplace-customCSS-submit { margin-left: auto; } @charset "UTF-8"; /* Readme pages */ .spicetify-root-vars { --spice-shadow: #1f1525; --spice-text: #ffffff; --spice-sidebar: #0a0e14; --spice-button-disabled: #535353; --spice-main: #0a0e14; --spice-misc: #bfbfbf; --spice-selected-row: #909090; --spice-subtext: #f0f0f0; --spice-tab-active: #795b84; --spice-button: #6f3c89; --spice-notification: #6f3c89; --spice-player: #0a0e14; --spice-notification-error: #e22134; --spice-card: #6f3c89; --spice-button-active: #795b84; } :root { --background-body: var(--spice-main); --background: var(--spice-main); --background-alt: var(--spice-shadow); --selection: #1c76c5; --text-main: var(--spice-subtext); --text-bright: var(--spice-text); --text-muted: #a9b1ba; --links: #41adff; --focus: #0096bfab; --border: #526980; --code: #ffbe85; --animation-duration: 0.1s; --button-base: #0c151c; --button-hover: #040a0f; --scrollbar-thumb: var(--button-hover); --scrollbar-thumb-hover: rgb(0, 0, 0); --form-placeholder: #a9a9a9; --form-text: #fff; --variable: #d941e2; --highlight: #efdb43; --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E"); } #marketplace-readme { user-select: text; /* * Forced dark theme version */ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; line-height: 1.4; max-width: 800px; margin: 20px auto; padding: 0 10px; word-wrap: break-word; color: #dbdbdb; color: var(--text-main); background: #202b38; background: var(--background-body); text-rendering: optimizeLegibility; } #marketplace-readme button { transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease; transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease; } #marketplace-readme input { transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease; transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease; } #marketplace-readme textarea { transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease; transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease; } #marketplace-readme h1 { font-size: 2.2em; margin-top: 0; } #marketplace-readme h1, #marketplace-readme h2, #marketplace-readme h3, #marketplace-readme h4, #marketplace-readme h5, #marketplace-readme h6 { margin-bottom: 12px; margin-top: 24px; } #marketplace-readme h1 { color: #fff; color: var(--text-bright); } #marketplace-readme h2 { color: #fff; color: var(--text-bright); } #marketplace-readme h3 { color: #fff; color: var(--text-bright); } #marketplace-readme h4 { color: #fff; color: var(--text-bright); } #marketplace-readme h5 { color: #fff; color: var(--text-bright); } #marketplace-readme h6 { color: #fff; color: var(--text-bright); } #marketplace-readme strong { color: #fff; color: var(--text-bright); } #marketplace-readme h1, #marketplace-readme h2, #marketplace-readme h3, #marketplace-readme h4, #marketplace-readme h5, #marketplace-readme h6, #marketplace-readme b, #marketplace-readme strong, #marketplace-readme th { font-weight: 600; } #marketplace-readme q::before { content: none; } #marketplace-readme q::after { content: none; } #marketplace-readme blockquote { border-left: 4px solid #0096bfab; border-left: 4px solid var(--focus); margin: 1.5em 0; padding: 0.5em 1em; font-style: italic; } #marketplace-readme q { border-left: 4px solid #0096bfab; border-left: 4px solid var(--focus); margin: 1.5em 0; padding: 0.5em 1em; font-style: italic; } #marketplace-readme blockquote > footer { font-style: normal; border: 0; } #marketplace-readme blockquote cite { font-style: normal; } #marketplace-readme address { font-style: normal; } #marketplace-readme a[href^="mailto:"]::before { content: "📧 "; } #marketplace-readme a[href^="tel:"]::before { content: "📞 "; } #marketplace-readme a[href^="sms:"]::before { content: "💬 "; } #marketplace-readme mark { background-color: #efdb43; background-color: var(--highlight); border-radius: 2px; padding: 0 2px 0 2px; color: #000; } #marketplace-readme a > code, #marketplace-readme a > strong { color: inherit; } #marketplace-readme button, #marketplace-readme select, #marketplace-readme input[type=submit], #marketplace-readme input[type=reset], #marketplace-readme input[type=button], #marketplace-readme input[type=checkbox], #marketplace-readme input[type=range], #marketplace-readme input[type=radio] { cursor: pointer; } #marketplace-readme input, #marketplace-readme select { display: block; } #marketplace-readme [type=checkbox], #marketplace-readme [type=radio] { display: initial; } #marketplace-readme input { color: #fff; color: var(--form-text); background-color: #161f27; background-color: var(--background); font-family: inherit; font-size: inherit; margin-right: 6px; margin-bottom: 6px; padding: 10px; border: none; border-radius: 6px; outline: none; } #marketplace-readme button { color: #fff; color: var(--form-text); background-color: #161f27; background-color: var(--background); font-family: inherit; font-size: inherit; margin-right: 6px; margin-bottom: 6px; padding: 10px; border: none; border-radius: 6px; outline: none; } #marketplace-readme textarea { color: #fff; color: var(--form-text); background-color: #161f27; background-color: var(--background); font-family: inherit; font-size: inherit; margin-right: 6px; margin-bottom: 6px; padding: 10px; border: none; border-radius: 6px; outline: none; } #marketplace-readme select { color: #fff; color: var(--form-text); background-color: #161f27; background-color: var(--background); font-family: inherit; font-size: inherit; margin-right: 6px; margin-bottom: 6px; padding: 10px; border: none; border-radius: 6px; outline: none; } #marketplace-readme button { background-color: #0c151c; background-color: var(--button-base); padding-right: 30px; padding-left: 30px; } #marketplace-readme input[type=submit] { background-color: #0c151c; background-color: var(--button-base); padding-right: 30px; padding-left: 30px; } #marketplace-readme input[type=reset] { background-color: #0c151c; background-color: var(--button-base); padding-right: 30px; padding-left: 30px; } #marketplace-readme input[type=button] { background-color: #0c151c; background-color: var(--button-base); padding-right: 30px; padding-left: 30px; } #marketplace-readme button:hover { background: #040a0f; background: var(--button-hover); } #marketplace-readme input[type=submit]:hover { background: #040a0f; background: var(--button-hover); } #marketplace-readme input[type=reset]:hover { background: #040a0f; background: var(--button-hover); } #marketplace-readme input[type=button]:hover { background: #040a0f; background: var(--button-hover); } #marketplace-readme input[type=color] { min-height: 2rem; padding: 8px; cursor: pointer; } #marketplace-readme input[type=checkbox], #marketplace-readme input[type=radio] { height: 1em; width: 1em; } #marketplace-readme input[type=radio] { border-radius: 100%; } #marketplace-readme input { vertical-align: top; } #marketplace-readme label { vertical-align: middle; margin-bottom: 4px; display: inline-block; } #marketplace-readme input:not([type=checkbox]):not([type=radio]), #marketplace-readme input[type=range], #marketplace-readme select, #marketplace-readme button, #marketplace-readme textarea { -webkit-appearance: none; } #marketplace-readme textarea { display: block; margin-right: 0; box-sizing: border-box; resize: vertical; } #marketplace-readme textarea:not([cols]) { width: 100%; } #marketplace-readme textarea:not([rows]) { min-height: 40px; height: 140px; } #marketplace-readme select { background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50%/12px no-repeat; background: var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat; padding-right: 35px; } #marketplace-readme select::-ms-expand { display: none; } #marketplace-readme select[multiple] { padding-right: 10px; background-image: none; overflow-y: auto; } #marketplace-readme input:focus { box-shadow: 0 0 0 2px #0096bfab; box-shadow: 0 0 0 2px var(--focus); } #marketplace-readme select:focus { box-shadow: 0 0 0 2px #0096bfab; box-shadow: 0 0 0 2px var(--focus); } #marketplace-readme button:focus { box-shadow: 0 0 0 2px #0096bfab; box-shadow: 0 0 0 2px var(--focus); } #marketplace-readme textarea:focus { box-shadow: 0 0 0 2px #0096bfab; box-shadow: 0 0 0 2px var(--focus); } #marketplace-readme input[type=checkbox]:active, #marketplace-readme input[type=radio]:active, #marketplace-readme input[type=submit]:active, #marketplace-readme input[type=reset]:active, #marketplace-readme input[type=button]:active, #marketplace-readme input[type=range]:active, #marketplace-readme button:active { transform: translateY(2px); } #marketplace-readme input:disabled, #marketplace-readme select:disabled, #marketplace-readme button:disabled, #marketplace-readme textarea:disabled { cursor: not-allowed; opacity: 0.5; } #marketplace-readme ::-moz-placeholder { color: #a9a9a9; color: var(--form-placeholder); } #marketplace-readme :-ms-input-placeholder { color: #a9a9a9; color: var(--form-placeholder); } #marketplace-readme ::-ms-input-placeholder { color: #a9a9a9; color: var(--form-placeholder); } #marketplace-readme ::placeholder { color: #a9a9a9; color: var(--form-placeholder); } #marketplace-readme fieldset { border: 1px #0096bfab solid; border: 1px var(--focus) solid; border-radius: 6px; margin: 0; margin-bottom: 12px; padding: 10px; } #marketplace-readme legend { font-size: 0.9em; font-weight: 600; } #marketplace-readme input[type=range] { margin: 10px 0; padding: 10px 0; background: transparent; } #marketplace-readme input[type=range]:focus { outline: none; } #marketplace-readme input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 9.5px; -webkit-transition: 0.2s; transition: 0.2s; background: #161f27; background: var(--background); border-radius: 3px; } #marketplace-readme input[type=range]::-webkit-slider-thumb { box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d; height: 20px; width: 20px; border-radius: 50%; background: #526980; background: var(--border); -webkit-appearance: none; margin-top: -7px; } #marketplace-readme input[type=range]:focus::-webkit-slider-runnable-track { background: #161f27; background: var(--background); } #marketplace-readme input[type=range]::-moz-range-track { width: 100%; height: 9.5px; -moz-transition: 0.2s; transition: 0.2s; background: #161f27; background: var(--background); border-radius: 3px; } #marketplace-readme input[type=range]::-moz-range-thumb { box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; height: 20px; width: 20px; border-radius: 50%; background: #526980; background: var(--border); } #marketplace-readme input[type=range]::-ms-track { width: 100%; height: 9.5px; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent; } #marketplace-readme input[type=range]::-ms-fill-lower { background: #161f27; background: var(--background); border: 0.2px solid #010101; border-radius: 3px; box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; } #marketplace-readme input[type=range]::-ms-fill-upper { background: #161f27; background: var(--background); border: 0.2px solid #010101; border-radius: 3px; box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; } #marketplace-readme input[type=range]::-ms-thumb { box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; border: 1px solid #000; height: 20px; width: 20px; border-radius: 50%; background: #526980; background: var(--border); } #marketplace-readme input[type=range]:focus::-ms-fill-lower { background: #161f27; background: var(--background); } #marketplace-readme input[type=range]:focus::-ms-fill-upper { background: #161f27; background: var(--background); } #marketplace-readme a { text-decoration: none; color: #41adff; color: var(--links); } #marketplace-readme a:hover { text-decoration: underline; } #marketplace-readme code { background: #161f27; background: var(--background); color: #ffbe85; color: var(--code); padding: 2.5px 5px; border-radius: 6px; font-size: 1em; } #marketplace-readme samp { background: #161f27; background: var(--background); color: #ffbe85; color: var(--code); padding: 2.5px 5px; border-radius: 6px; font-size: 1em; } #marketplace-readme time { background: #161f27; background: var(--background); color: #ffbe85; color: var(--code); padding: 2.5px 5px; border-radius: 6px; font-size: 1em; } #marketplace-readme pre > code { padding: 10px; display: block; overflow-x: auto; } #marketplace-readme var { color: #d941e2; color: var(--variable); font-style: normal; font-family: monospace; } #marketplace-readme kbd { background: #161f27; background: var(--background); border: 1px solid #526980; border: 1px solid var(--border); border-radius: 2px; color: #dbdbdb; color: var(--text-main); padding: 2px 4px 2px 4px; } #marketplace-readme img, #marketplace-readme video { max-width: 100%; height: auto; } #marketplace-readme hr { border: none; border-top: 1px solid #526980; border-top: 1px solid var(--border); } #marketplace-readme table { border-collapse: collapse; margin-bottom: 10px; width: 100%; table-layout: fixed; } #marketplace-readme table caption { text-align: left; } #marketplace-readme td, #marketplace-readme th { padding: 6px; text-align: left; vertical-align: top; word-wrap: break-word; } #marketplace-readme thead { border-bottom: 1px solid #526980; border-bottom: 1px solid var(--border); } #marketplace-readme tfoot { border-top: 1px solid #526980; border-top: 1px solid var(--border); } #marketplace-readme tbody tr:nth-child(even) { background-color: #161f27; background-color: var(--background); } #marketplace-readme tbody tr:nth-child(even) button { background-color: #1a242f; background-color: var(--background-alt); } #marketplace-readme tbody tr:nth-child(even) button:hover { background-color: #202b38; background-color: var(--background-body); } #marketplace-readme ::-webkit-scrollbar { height: 10px; width: 10px; } #marketplace-readme ::-webkit-scrollbar-track { background: #161f27; background: var(--background); border-radius: 6px; } #marketplace-readme ::-webkit-scrollbar-thumb { background: #040a0f; background: var(--scrollbar-thumb); border-radius: 6px; } #marketplace-readme ::-webkit-scrollbar-thumb:hover { background: black; background: var(--scrollbar-thumb-hover); } #marketplace-readme ::-moz-selection { background-color: #1c76c5; background-color: var(--selection); color: #fff; color: var(--text-bright); } #marketplace-readme ::selection { background-color: #1c76c5; background-color: var(--selection); color: #fff; color: var(--text-bright); } #marketplace-readme details { display: flex; flex-direction: column; align-items: flex-start; background-color: #1a242f; background-color: var(--background-alt); padding: 10px 10px 0; margin: 1em 0; border-radius: 6px; overflow: hidden; } #marketplace-readme details[open] { padding: 10px; } #marketplace-readme details > :last-child { margin-bottom: 0; } #marketplace-readme details[open] summary { margin-bottom: 10px; } #marketplace-readme summary { display: list-item; background-color: #161f27; background-color: var(--background); padding: 10px; margin: -10px -10px 0; cursor: pointer; outline: none; } #marketplace-readme summary:hover, #marketplace-readme summary:focus { text-decoration: underline; } #marketplace-readme details > :not(summary) { margin-top: 0; } #marketplace-readme summary::-webkit-details-marker { color: #dbdbdb; color: var(--text-main); } #marketplace-readme dialog { background-color: #1a242f; background-color: var(--background-alt); color: #dbdbdb; color: var(--text-main); border: none; border-radius: 6px; border-color: #526980; border-color: var(--border); padding: 10px 30px; } #marketplace-readme dialog > header:first-child { background-color: #161f27; background-color: var(--background); border-radius: 6px 6px 0 0; margin: -10px -30px 10px; padding: 10px; text-align: center; } #marketplace-readme dialog::-webkit-backdrop { background: #0000009c; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #marketplace-readme dialog::backdrop { background: #0000009c; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #marketplace-readme footer { border-top: 1px solid #526980; border-top: 1px solid var(--border); padding-top: 10px; color: #a9b1ba; color: var(--text-muted); } #marketplace-readme body > footer { margin-top: 40px; } @media print { #marketplace-readme body, #marketplace-readme pre, #marketplace-readme code, #marketplace-readme summary, #marketplace-readme details, #marketplace-readme button, #marketplace-readme input, #marketplace-readme textarea { background-color: #fff; } #marketplace-readme button, #marketplace-readme input, #marketplace-readme textarea { border: 1px solid #000; } #marketplace-readme body, #marketplace-readme h1, #marketplace-readme h2, #marketplace-readme h3, #marketplace-readme h4, #marketplace-readme h5, #marketplace-readme h6, #marketplace-readme pre, #marketplace-readme code, #marketplace-readme button, #marketplace-readme input, #marketplace-readme textarea, #marketplace-readme footer, #marketplace-readme summary, #marketplace-readme strong { color: #000; } #marketplace-readme summary::marker { color: #000; } #marketplace-readme summary::-webkit-details-marker { color: #000; } #marketplace-readme tbody tr:nth-child(even) { background-color: #f2f2f2; } #marketplace-readme a { color: #00f; text-decoration: underline; } } #marketplace-readme code { border: 1px solid var(--spice-button-disabled); } #marketplace-readme ul, #marketplace-readme li { list-style-position: inside; } #marketplace-readme ul li, #marketplace-readme li li { margin-bottom: 8px; } #marketplace-readme ul { list-style-type: disc; } #marketplace-readme ol { list-style-type: auto; } #marketplace-readme p, #marketplace-readme pre, #marketplace-readme code { margin: 8px 0; } #marketplace-readme pre { overflow-x: auto; } #marketplace-readme table { table-layout: auto; } #marketplace-readme table th, #marketplace-readme table td { border: 1px solid var(--spice-button-disabled); } /* TODO: can we get this added to the default Spicetify stylesheet? It should fix broken extension modals */ .GenericModal { background-color: var(--spice-player); } /* TODOs: - We might want to customize/scope the css classes etc so we don't interfere with other extension like reddit */ /*# sourceMappingURL=style.css.map */