spicetify-themes/Ziro/user.css

590 lines
17 KiB
CSS

:root {
--br-1: 10px;
--br-2: 8px;
--scrollbar: unset;
--spice-main-elevated: var(--spice-main);
--spice-highlight: var(--spice-button-disabled);
--spice-highlight-elevated: var(--spice-card);
}
.encore-dark-theme, .encore-dark-theme .encore-base-set {
--text-subdued: var(--spice-subtext);
}
/* background */
.main-home-homeHeader,
.main-entityHeader-backgroundColor,
.main-actionBarBackground-background {
display: none;
}
.main-topBar-overlay, .main-view-container, .Root__nav-bar{
background-color: var(--spice-main);
}
.main-topBar-background {
opacity: 1 !important;
background-color: var(--spice-main) !important;
}
* {
box-shadow: none !important;
}
/* dividers */
.Y_WW1akjiQKXSzCBalCD {
display: none;
}
/* navbar */
.main-rootlist-rootlist {
--left-sidebar-padding-left: 24px !important;
--left-sidebar-padding-right: 24px !important;
}
.main-rootlist-rootlistDividerContainer {
display: none;
}
.main-navBar-navBarLinkActive,
.main-collectionLinkButton-selected,
.main-rootlist-rootlistItemLinkActive {
color: var(--spice-shadow) !important;
background: var(--spice-selected-row) !important;
}
.main-navBar-navBarLink,
.main-collectionLinkButton-collectionLinkButton,
.main-rootlist-rootlistItemLink,
.main-createPlaylistButton-button {
border-radius: var(--br-1) !important;
}
.main-navBar-navBarLink:hover,
.main-collectionLinkButton-collectionLinkButton:hover,
.main-rootlist-rootlistItemLink:hover,
.main-createPlaylistButton-button:hover {
background: var(--spice-button-disabled);
}
.main-rootlist-rootlistItem {
padding: 0 8px 0 calc(8px + var(--indentation) * 8px);
}
.main-rootlist-rootlistItemLink {
padding: 0 16px;
}
.main-rootlist-statusIcons,
.main-rootlist-expandArrow {
position: absolute;
right: 24px;
}
.main-rootlist-expandArrow {
top: 8px;
color: var(--spice-subtext);
}
.main-rootlist-rootlistItemLinkActive + .main-rootlist-statusIcons .main-rootlist-playButton,
.main-rootlist-rootlistItemLinkActive + .main-rootlist-expandArrow {
color: var(--spice-shadow) !important;
}
.main-navBar-navBarLink {
color: var(--spice-text);
}
.main-collectionLinkButton-collectionLinkButton > *,
.main-createPlaylistButton-button {
opacity: 1 !important;
}
.main-rootlist-rootlist .os-scrollbar {
padding: 0 0 0 8px;
}
.main-rootlist-rootlistItemLinkActive .main-rootlist-expandArrow:focus,
.main-rootlist-rootlistItemLinkActive .main-rootlist-textWrapper:focus,
.main-rootlist-rootlistItemLinkActive .main-rootlist-textWrapper:hover {
color: var(--spice-main);
}
/* player */
.main-nowPlayingBar-center .playback-progressbar {
position: absolute;
left: 0;
bottom: 82px;
}
.main-nowPlayingBar-nowPlayingBar:not(:only-child) .playback-progressbar:not(.volume-bar__slider-container > .playback-progressbar) {
bottom: 108px;
}
.playback-bar {
--bar: var(--spice-button);
}
.volume-bar {
--bar: var(--spice-subtext);
margin-right: 8px;
}
.playback-bar .progress-bar {
--progress-bar-radius: 0;
}
.playback-bar:hover .progress-bar,
.playback-bar .DuvrswZugGajIFNXObAr {
--progress-bar-height: 8px;
}
.x-progressBar-progressBarBg {
background-color: var(--spice-button-disabled);
}
.DuvrswZugGajIFNXObAr .progress-bar__slider,
.epWhU7hHGktzlO_dop6z {
background-color: var(--bar) !important;
}
.progress-bar__slider {
display: block;
background-color: var(--spice-shadow);
border: 2px solid var(--bar);
height: 16px;
width: 16px;
}
.playback-bar .progress-bar__slider {
height: 20px;
width: 20px;
}
.playback-bar__progress-time-elapsed,
.main-playbackBarRemainingTime-container {
color: var(--spice-text);
position: absolute;
margin-bottom: 33px;
right: 0;
}
.playback-bar__progress-time-elapsed {
right: 43px;
}
.playback-bar__progress-time-elapsed::after {
content: ' /';
}
.main-nowPlayingBar-extraControls {
margin-right: 75px;
}
.player-controls__buttons {
margin: 0;
}
.player-controls__buttons button:not(.main-playPauseButton-button) {
color: var(--spice-button) !important;
}
.main-genericButton-button {
color: var(--spice-button) !important;
}
.connect-device-list-content {
border-radius: var(--br-1);
border: 1px solid var(--spice-button-disabled);
padding: 12px;
}
.connect-device-list-item:hover {
background-color: var(--spice-button-disabled);
border-radius: var(--br-2);
}
.cover-art-image {
border-radius: calc(var(--br-2) / 2);
}
.main-coverSlotCollapsed-container[aria-hidden='true'] .cover-art-image {
border-radius: var(--br-1);
}
/* friends */
.main-buddyFeed-addFriendsContainer {
background-color: var(--spice-sidebar);
}
.main-buddyFeed-friendActivity {
padding: 8px;
margin: 8px;
background: var(--spice-card);
border-radius: var(--br-1);
}
.HdRGC,
.eEsqRZ,
.main-buddyFeed-usernameAndTimestamp a {
color: var(--spice-text) !important;
}
.main-buddyFeed-activityMetadata > :not(:first-child) a,
.main-buddyFeed-timestamp {
color: var(--spice-subtext) !important;
}
.main-avatar-avatar.vreGJrlRqoFkzlSQwvsJ:after {
background: var(--spice-text);
box-shadow: none;
}
/* cards */
.main-card-card,
.Z35BWOA10YGn5uc9YgAp,
.main-heroCard-card,
.a2ruVaZt_DdrdHz3GqgU,
.x-categoryCard-CategoryCard {
background-color: var(--spice-card);
border-radius: var(--br-1);
}
.Z35BWOA10YGn5uc9YgAp:hover {
background: var(--spice-button-disabled);
}
.main-cardImage-imageWrapper:not(.main-cardImage-circular) {
border-radius: var(--br-2);
}
.Z35BWOA10YGn5uc9YgAp .main-image-image {
border-radius: var(--br-2) 0 0 var(--br-2);
}
.zXwER4Lsqq_e7fVVaPkZ {
background-color: transparent !important;
}
.cSeieV {
background-color: var(--spice-button-active);
}
/* menus */
.main-contextMenu-menu {
border: 1px solid var(--spice-button-disabled);
border-radius: var(--br-1);
padding: 8px;
}
.main-contextMenu-menuItemButton:hover {
background-color: var(--spice-button-disabled);
}
.main-contextMenu-menuItemButton {
border-radius: var(--br-2);
}
.main-contextMenu-menuItemButton::before,
.main-contextMenu-menuItemButton::after {
display: none;
}
.main-contextMenu-menuItemButton {
color: var(--spice-text) !important;
}
/* input */
.x-searchInput-searchInputInput,
.x-proxySettings-proxyInput,
.main-dropDown-dropDown,
.QZhV0hWVKlExlKr266jo,
.amTaUy6eMlbKh0wzrOnb {
background: var(--spice-card);
border-radius: var(--br-2);
}
.x-searchInput-searchInputSearchIcon,
.x-searchInput-searchInputInput,
.x-searchInput-searchInputClearButton {
color: var(--spice-text) !important;
}
/* buttons */
.wCl7pMTEE68v1xuZeZiB:hover,
.w6j_vX6SF5IxSXrrkYw5:hover,
.w6j_vX6SF5IxSXrrkYw5[data-context-menu-open='true'],
.fLS8v3_EfBadEerbGVoR:hover,
.aAr9nYtPsG7P2LRzciXc {
background: var(--spice-button-disabled);
border-radius: var(--br-2);
}
.w6j_vX6SF5IxSXrrkYw5 {
background-color: transparent;
}
.main-actionBar-ActionBarRow button:not(.bqeOGM),
.QhF9ZR7YOiJeFiEnfkOr button,
.CpQBQL6M4D3bquNOpKd9,
.player-controls__buttons button,
.DbMYFmOEEz9PH1h1zK9n button,
.main-moreButton-button,
.w6j_vX6SF5IxSXrrkYw5,
.gIobRDHAxkAvUaF4_OOL button {
color: var(--spice-button);
}
.bqeOGM:hover .ButtonInner-sc-14ud5tc-0,
.dkGAhA:hover .ButtonInner-sc-14ud5tc-0,
.jEaMNl:hover .ButtonInner-sc-14ud5tc-0,
.fBTYgGyvIbHizHIj7AAX,
.main-playPauseButton-button {
background-color: var(--spice-button);
}
.kxBVag {
color: var(--spice-subtext);
}
.main-button-primary,
.fBTYgGyvIbHizHIj7AAX,
.main-playPauseButton-button {
color: var(--spice-shadow) !important;
}
.aAr9nYtPsG7P2LRzciXc {
border: none;
}
.main-button-outlined {
border-color: var(--spice-button);
}
.rEx3EYgBzS8SoY7dmC6x rect {
fill: var(--spice-button);
}
/* scrollbar */
.os-scrollbar {
display: var(--scrollbar);
}
.os-scrollbar-handle {
border-radius: var(--br-2);
background: var(--spice-button-disabled) !important;
}
/* tab bar */
.oaNVBli46GtVjaQKB15g,
.marketplace-tabBar-active,
.lyrics-tabBar-active,
.queue-tabBar-active {
color: var(--spice-shadow) !important;
background: var(--spice-tab-active) !important;
}
.JdlKTdpMquftpMwwegZo,
.marketplace-tabBar-headerItemLink,
.lyrics-tabBar-headerItemLink {
border-radius: var(--br-2);
}
.JdlKTdpMquftpMwwegZo:hover,
.marketplace-tabBar-headerItemLink:hover {
background: var(--spice-button-disabled);
}
/* marketplace */
.main-navBar-navBarItem[data-id='/spicetify-marketplace'] svg {
vertical-align: middle;
}
.main-type-mestoBold {
font-weight: 700;
font-size: 0.875rem;
}
.marketplace-card-desc {
font-size: 0.875rem;
line-height: 1rem;
}
.main-cardHeader-text {
font-weight: 700;
}
.marketplace-header {
height: 36px;
}
.marketplace-header__right {
position: fixed;
}
.marketplace-settings-button {
padding: 12px 12px 8px;
border-radius: var(--br-2);
}
.marketplace-settings-button:hover {
background-color: var(--spice-button-disabled);
}
.GenericModal > * {
background-color: var(--spice-main) !important;
color: var(--spice-text);
}
.GenericModal,
.GenericModal > * {
border-radius: var(--br-1);
}
.main-playButton-PlayButton {
color: var(--spice-shadow) !important;
}
.marketplace-card--installed {
border: none;
}
/* headers */
.CmkY1Ag0tJDfnFXbGgju:not(.hNTPwmaxPotdJ14dx2W9 *) {
border-radius: var(--br-1);
}
.main-entityHeader-gray,
.main-entityHeader-metaData,
.UyzJidwrGk3awngSGIwv,
.main-entityHeader-divider {
color: var(--spice-text) !important;
}
.main-entityHeader-background {
transform: none !important;
margin-top: 64px;
border-radius: var(--br-1);
}
.main-entityHeader-overlay {
background: none;
}
.main-entityHeader-withBackgroundImage,
.main-entityHeader-withBackgroundImage + div {
transform: translateY(64px);
}
.main-entityHeader-container.main-entityHeader-withBackgroundImage {
background-image: linear-gradient(50deg, rgba(var(--spice-rgb-card), 1) 30%, rgba(var(--spice-rgb-card), 0.7) 60%, transparent 90%);
border-radius: var(--br-1);
}
/* tracklist */
.main-trackList-trackList .main-rootlist-wrapper {
background: var(--spice-card);
border-radius: 10px 10px 0px 0px;
padding: 8px;
}
.main-trackList-trackListHeaderRow {
border: none;
}
.main-trackList-trackListRow:hover,
.jtZMR8Hj94od6BQce98P:hover {
background-color: var(--spice-button-disabled);
}
.main-trackList-trackListRow.main-trackList-selected,
.jtZMR8Hj94od6BQce98P:active {
background-color: var(--spice-tab-active) !important;
}
.main-trackList-selected * {
color: var(--spice-shadow) !important;
}
.main-trackList-selected .main-trackList-playingIcon,
.main-trackList-selected .main-tag-container {
background-color: var(--spice-shadow);
color: var(--spice-text) !important;
}
.main-trackList-trackListRow,
.jtZMR8Hj94od6BQce98P {
border-radius: var(--br-2);
}
.main-trackList-trackList {
border-radius: var(--br-1);
border-bottom: 16px solid var(--spice-card);
}
.fcehhQ {
color: var(--spice-subtext);
}
.main-tag-container {
background-color: var(--spice-subtext);
}
.main-trackList-playingIcon {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
background: var(--spice-text);
content-visibility: hidden;
}
.main-trackList-filterHighlight {
background-color: var(--spice-button);
color: var(--spice-shadow);
}
/* podcasts */
.main-yourEpisodes-coverContainer,
.SpVoh9vvBN0kIwzfCiBh,
.ltjunXlP2FwPEVF992n9 {
border-radius: var(--br-1);
}
.TT1tIewS2iI8Uz8kLuQB {
border-radius: var(--br-2);
margin: 0 8px;
}
.TT1tIewS2iI8Uz8kLuQB:hover {
background-color: var(--spice-button-disabled);
}
.Ng3dPPA2_1CFYkzPukjM {
background: var(--spice-text);
}
.Q3wDjXPNY4lACLUxARrd + div {
background-color: var(--spice-card);
padding: 8px 0;
border-radius: var(--br-1);
}
.knWBkA {
color: var(--spice-subtext);
}
.qfYkuLpETFW3axnfMntO,
.poz9gZKE7xqFwgk231J4,
.UyzJidwrGk3awngSGIwv,
.xWm_uA0Co4SXVxaO7wlB {
color: var(--spice-text) !important;
}
path[fill='#1ed760'] {
fill: var(--spice-button) !important;
}
.E4I5I7G2CfW32hLWZaqE,
.SpVoh9vvBN0kIwzfCiBh {
background-color: var(--spice-card);
}
.rFwxt8s8DYY8p1O7tYZW {
background: none;
}
/* settings */
.x-toggle-indicator {
height: 18px;
width: 18px;
top: 3px;
left: 3px;
background: var(--spice-shadow) !important;
}
input:checked ~ .x-toggle-indicatorWrapper .x-toggle-indicator {
right: 3px;
}
.cOFYck {
color: var(--spice-subtext);
}
.main-playlistEditDetailsModal-textElement {
border-radius: var(--br-1);
}
.main-playlistEditDetailsModal-textElement:focus {
background: rgba(var(--spice-rgb-selected-row),.1) !important;
}
/* fullscreen */
.npv-main-container .npv-cross-fade-image {
border-radius: calc(var(--br-1) * 3);
}
.npv-main-container .playback-bar__progress-time-elapsed,
.npv-main-container .main-playbackBarRemainingTime-container {
margin-bottom: -125px;
margin-right: -86px;
}
.npv-up-next {
background: var(--spice-card) !important;
border: none !important;
border-radius: var(--br-1);
}
.npv-up-next__image {
border-radius: var(--br-2);
}
.npv-header__metadata {
color: var(--spice-text);
}
/* misc */
.lyrics-lyrics-container.lyrics-lyrics-coverTopBar {
--lyrics-color-active: var(--spice-text) !important;
--lyrics-color-inactive: var(--spice-subtext) !important;
--lyrics-color-passed: var(--spice-subtext) !important;
--lyrics-color-messaging: var(--spice-text) !important;
}
.lyrics-lyricsContainer-LyricsBackground {
background-image: none;
}
.lyrics-lyrics-background {
background-color: var(--spice-main);
}
.jixVGx,
.euRuBv {
color: var(--spice-text);
}
.XmR5VFpqXOcxRvhuf6OB {
border-radius: var(--br-1);
}
.main-rootlist-rootlistDividerContainer {
display: none;
}
.main-home-homeHeader {
display: none;
}
.main-rootlist-rootlistItemOverlay {
display: none;
}
.main-rootlist-rootlist {
--left-sidebar-padding-left: 8px;
--left-sidebar-padding-right: 8px;
}
label.Type__TypeElement-goli3j-0.gCwing.main-playlistEditDetailsModal-textElementLabel {
padding-bottom: 12px;
}
/*navbar icon*/
.collection-active-icon, .collection-icon, .home-active-icon, .home-icon, .premiumSpotifyIcon, .search-active-icon, .search-icon {
color: var(--spice-text);
}
/*navbar active icon*/
.main-navBar-navBarItem .collection-active-icon, .main-navBar-navBarItem .home-active-icon, .main-navBar-navBarItem .make-music-active-icon, .main-navBar-navBarItem .main-navBar-navBarLinkActive .collection-icon, .main-navBar-navBarItem .main-navBar-navBarLinkActive .home-icon, .main-navBar-navBarItem .main-navBar-navBarLinkActive .make-music-icon, .main-navBar-navBarItem .main-navBar-navBarLinkActive .search-icon, .main-navBar-navBarItem .search-active-icon {
color: var(--spice-main);
}
/*playing status icon - Playlist*/
.CCeu9OfWSwIAJqA49n84.ZcKzjCkYGeMizcSAP8UX {
color: var(--spice-subtext);
top: 10px;
}
.main-rootlist-rootlistItemLinkActive + .main-rootlist-statusIcons .CCeu9OfWSwIAJqA49n84.ZcKzjCkYGeMizcSAP8UX {
color: var(--spice-main);
top: 10px;
}
/* download icon - Playlist */
.hcxPtZcvjM07S6ydT685 {
top: 10px;
position: relative;
}
/*playing status icon - Liked Songs*/
.CCeu9OfWSwIAJqA49n84.Frn4juLXf6zInWBEFFzr {
color: var(--spice-text);
}
.main-collectionLinkButton-selected .main-rootlist-statusIcons .CCeu9OfWSwIAJqA49n84.Frn4juLXf6zInWBEFFzr {
color: var(--spice-main);
}
/*about artist card text*/
.artist-artistAbout-container.artist-artistAbout-backgroundImage .artist-artistAbout-content > div {
color: #fff;
}