EXTREMEXPLOIT

Spotify User.css

Nov 14th, 2020
185
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 17.90 KB | None | 0 0
  1. :root {
  2.     --bar-height: 120px;
  3. }
  4.  
  5. /*Round corner cover image*/
  6. .card-image,
  7. .card-placeholder-wrapper,
  8. .card-image-content-wrapper,
  9. .Card:not(.Card--artist) .Card__image,
  10. .Card:not(.Card--artist) .Card__image-wrapper {
  11.     border-radius: 5px !important; /*El valor original era 10px, pero me gusta menos redondeado.*/
  12.     overflow: hidden !important
  13. }
  14.  
  15. /*Hide some annoying elements like profile name and pic, upgrade button and device connect bar at bottom, new playlist button*/
  16. .profile.content-top-bar__profile-link,
  17. .upgrade-button,
  18. .view-player .remote-playback-bar,
  19. .NewPlaylistButton {
  20.     display: none !important;
  21. }
  22.  
  23.  
  24. /*Exclude these elements from draggable property because it stops them from clickable*/
  25. .profile-items-container,
  26. .profile {
  27.     -webkit-app-region: no-drag !important;
  28. }
  29.  
  30. /*Thinner scrollbar*/
  31. ::-webkit-scrollbar {
  32.     height: 6px !important;
  33.     width: 6px !important;
  34.     background-color: transparent;
  35. }
  36.  
  37. /*Round corner scrollbar*/
  38. ::-webkit-scrollbar-thumb {
  39.     border-radius: 3px !important;
  40. }
  41.  
  42. /*Hide top and bottom buttons of scrollbar */
  43. /*who uses those, lol*/
  44. ::-webkit-scrollbar-button {
  45.     display: none !important;
  46. }
  47.  
  48. /*Hide cover image overlay*/
  49. .card-overlay {
  50.     visibility: hidden !important;
  51. }
  52.  
  53. /*Lift up cover when hovering on it*/
  54. .card-image-content-wrapper,
  55. .Card:not(.Card--artist) .Card__image-wrapper {
  56.     transition-property: transform, box-shadow !important;
  57.     transition-duration: 1s !important;
  58.     transition-timing-function: cubic-bezier(.3,0,0,1) !important;
  59.     box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  60. }
  61.  
  62. .card-image-hit-area:not(.no-hover):hover .card-image-content-wrapper,
  63. .Card:not(.Card--artist) .Card__image-hit-area-counter-scale:hover .Card__image-wrapper {
  64.     transform: translateY(-10px);
  65.     box-shadow: 0 15px 30px rgba(0,0,0,0.3);
  66. }
  67.  
  68. .card-image-hit-area .card-button-add,
  69. .card-image-hit-area .card-button-play,
  70. .card-image-hit-area .card-button-more,
  71. .Card__image-hit-area .card-button-add,
  72. .Card__image-hit-area .card-button-play,
  73. .Card__image-hit-area .card-button-more,
  74. .Card__image-hit-area .Card__play-button,
  75. .Card__image-hit-area .Card__add-button,
  76. .Card__image-hit-area .Card__more-button,
  77. .Card__image-hit-area .Card__overlay  {
  78.     transition-property: all !important;
  79.     transition-duration: 1s !important;
  80.     transition-timing-function: cubic-bezier(.3,0,0,1) !important;
  81.     opacity: 0 !important;
  82. }
  83. .card-image-hit-area:not(.no-hover):hover .card-button-add,
  84. .card-image-hit-area:not(.no-hover):hover .card-button-play,
  85. .card-image-hit-area:not(.no-hover):hover .card-button-more,
  86. .Card__image-hit-area:not(.no-hover):hover .card-button-add,
  87. .Card__image-hit-area:not(.no-hover):hover .card-button-play,
  88. .Card__image-hit-area:not(.no-hover):hover .card-button-more {
  89.     opacity: 1 !important;
  90.     transform: translateY(-10px);
  91. }
  92.  
  93. .Card__image-hit-area:hover .Card__play-button,
  94. .Card__image-hit-area:hover .Card__add-button,
  95. .Card__image-hit-area:hover .Card__more-button,
  96. .Card__image-hit-area:hover .Card__overlay {
  97.     opacity: 1 !important;
  98. }
  99.  
  100. .glue-page-header__content .glue-page-header__image-inner {
  101.     border-radius: 10px;
  102.     box-shadow: unset !important;
  103. }
  104.  
  105. .glue-page-header__full-description-overlay {
  106.     box-shadow: unset !important;
  107. }
  108.  
  109. .card-placeholder-wrapper {
  110.     background: transparent !important;
  111. }
  112.  
  113. /*Spice up search input background*/
  114. .SearchInput__label {
  115.     color: var(--modspotify_search_box_color);
  116. }
  117. .SearchInput__input {
  118.     color: var(--modspotify_secondary_fg);
  119.     background-color: var(--search_box_bg_color) !important;
  120.     border-radius: 4px !important;
  121.     padding-left: 34px;
  122. }
  123.  
  124. .sidebar:hover .sidebar-navbar.sidebar-scroll-element {
  125.     opacity: 1!important;
  126. }
  127.  
  128. .view-player .player-controls-container,
  129. .view-player .player-controls-container .controls {
  130.     overflow: visible !important;
  131. }
  132.  
  133. .view-player .player-controls-container .controls .button-play{
  134.     height:50px !important;
  135.     border-radius:50px !important;
  136.     background: transparent !important;
  137.     box-shadow:0 0 0 0 !important;
  138.     width:50px !important;
  139.     overflow: visible !important;
  140.     box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
  141.     transition:none 0.3s cubic-bezier(.3,0,.7,1);
  142. }
  143.  
  144. .view-player .player-controls-container .controls .button-play:before{
  145.     font-size:18px !important;
  146.     padding-left: 16px !important;
  147.     padding-top: 9px !important;
  148. }
  149.  
  150. .view-player .player-controls-container .controls .button-play:after {
  151.     box-shadow: unset !important;
  152. }
  153.  
  154. .view-player .player-controls-container {
  155.     position: absolute !important;
  156.     width: 100% !important;
  157. }
  158.  
  159. .view-player .player-controls-container .controls {
  160.     width: 100% !important;
  161.     height: 100%  !important;
  162.     align-items: center !important;
  163.     margin-top : 0px !important;
  164. }
  165.  
  166. /*
  167. Hide the song duration and elapsed text. I dont know where to put those so I just hide them
  168. */
  169. .view-player .player-controls-container .progress-container .elapsed,
  170. .view-player .player-controls-container .progress-container .remaining {
  171.     display: none !important;
  172. }
  173.  
  174. /* Add round corner for Gerne and Mood cards */
  175. .gc-image-container,
  176. .gc-image {
  177.     border-radius: 10px !important;
  178. }
  179.  
  180. /*
  181. Collage of 3 album covers is usually seen in Browse and Chart.
  182. */
  183. .card-puff__image-wrapper,
  184. .card-puff__info-container,
  185. .card-puff__card-image {
  186.     border-radius: 10px !important;
  187. }
  188.  
  189. .card-puff__image-wrapper {
  190.   overflow: visible;
  191. }
  192.  
  193. .card-puff__card-image {
  194.     box-shadow: 5px 0 30px rgba(0,0,0,0.7);
  195.     overflow: visible;
  196. }
  197.  
  198. .card-puff__title-container {
  199.     background-color: transparent !important;
  200. }
  201.  
  202. .card-puff.pressed .card-puff__image-wrapper,
  203. .card-puff.pressed .card-puff__info-container {
  204.     opacity: 0.7 !important;
  205. }
  206.  
  207. .card-puff__title {
  208.     padding: 5px 10px 5px 10px !important;
  209.     background-color: var(--modspotify_main_bg) !important;
  210.     border-radius: 4px;
  211.     border: 2px solid var(--modspotify_main_fg);
  212. }
  213.  
  214. /*
  215. We use round corner on cover so they look weird in original
  216. form, so I move last cover to the right 20px and first one to the left 20px
  217. */
  218. .card-puff__card-image:nth-child(1) {
  219.     right: 20px;
  220.     box-shadow: 0 0 0 0 !important;
  221. }
  222.  
  223. .card-puff__card-image:nth-child(3) {
  224.     left: 20px;
  225. }
  226.  
  227. .grid-overlay-label {
  228.     top: 140px !important;
  229. }
  230.  
  231. /**/
  232. .glue-page-header__background-color {
  233.     background-image: none !important;
  234.     background: var(--modspotify_main_bg);
  235. }
  236.  
  237. /* .glue-page-header__sticky {
  238.     padding-top: 60px !important;
  239. } */
  240.  
  241. /*
  242. Remove those title, cringy description and
  243. meaningless followers number
  244. */
  245.  
  246. .carousel .card-info-subtitle-description,
  247. .carousel .card-info-subtitle-metadata,
  248. .carousel .card:not(.card-type-station).card-info-title,
  249. .carousel .card.card-type-playlist.image-loaded .card-info-subtitle-description,
  250. .carousel .card.card-type-playlist.image-loaded .card-info-subtitle-metadata {
  251.     display: none !important;
  252. }
  253.  
  254.  
  255. /*
  256. In top of Browse usually has bunch of Playlist or Album cards,
  257. and they has .carousel as a wrapper and it hides anything that
  258. overflows from its zone, aka our shadow and lifting animation.
  259. */
  260. .carousel {
  261.     overflow: visible !important;
  262. }
  263.  
  264. /*
  265. Button with text Play
  266. */
  267. .button.button-green,
  268. .GlueButton.GlueButton--style-green {
  269.     color: var(--modspotify_main_bg) !important;
  270. }
  271.  
  272. /*
  273. Change text color in playlist
  274. */
  275. .tl-premium .label,
  276. .tl-cell:not(.tl-number),
  277. .tl-cell a:link,
  278. .tl-highlight {
  279.   color: var(--modspotify_secondary_fg);
  280. }
  281.  
  282. .tl-explicit .label, {
  283.     color: var(--modspotify_explicit_text_color);
  284. }
  285.  
  286. .card-type-album .card-info-title,
  287. .card-type-track .card-info-title,
  288. .card-type-collection-album .card-info-title,
  289. .card-type-episode .card-info-title {
  290.     font-size: 15px;
  291.     font-weight: 900 !important;
  292.     text-align: center !important;
  293.     width: 100% !important;
  294. }
  295.  
  296. .card-type-album .card-info-subtitle-links,
  297. .card-type-track .card-info-subtitle-links,
  298. .card-type-collection-album .card-info-subtitle-links,
  299. .card-type-episode .card-info-subtitle-links {
  300.     text-align: center !important;
  301.     width: 100% !important;
  302. }
  303.  
  304. .tracklist-station-container::after {
  305.     background: transparent !important;
  306. }
  307.  
  308. .GlueHeader__background-overlay {
  309.     background: var(--modspotify_main_bg) !important;
  310. }
  311.  
  312. /* Move navigation buttons and search field to the right and down */
  313. .browser-navigation-top-bar {
  314.     margin-left: 40px !important;
  315.     margin-top: 15px !important;
  316. }
  317.  
  318. .SearchInput__input,
  319. .SearchInput__searchIcon,
  320. .SearchInput__clearButton {
  321.     margin-top: 15px !important;
  322. }
  323.  
  324. .content-top-bar__profile-menu-button {
  325.     margin-top: 15px !important;
  326. }
  327.  
  328. .body-container--windows:not(.with-buddy-list):not(.messagebar) .content-top-bar__profile {
  329.     margin-right: 110px !important;
  330.     margin-top: -5px;
  331. }
  332.  
  333. /* Spice up Fullscreen mode */
  334. #view-player .album-art .album-art__image {
  335.     border-radius: 30px !important;
  336.     box-shadow: 0 10px 70px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),.5) !important;
  337. }
  338.  
  339. #view-player .album-art .album-art__image .card-image-content-wrapper,
  340. #view-player .album-art .album-art__image .card-image-content-wrapper .card-image {
  341.     border-radius: 30px !important;
  342. }
  343.  
  344. #video-player .album-art__foreground {
  345.     flex-direction: row;
  346.     text-align: left;
  347. }
  348.  
  349. #video-player .album-art__background {
  350.     background-color: initial;
  351. }
  352.  
  353. #video-player .album-art__track-details {
  354.     padding-left: 50px;
  355.     line-height: initial;
  356. }
  357.  
  358. #video-player .album-art__track-title {
  359.     font-size: 84px;
  360.     margin-top: 0;
  361.     line-height: initial;
  362. }
  363.  
  364. #video-player .album-art__artist-name {
  365.     font-size: 54px;
  366.     margin-top: 0;
  367.     line-height: initial;
  368. }
  369.  
  370. /* Daily mixes */
  371. .carousel .card-info-wrapper.card-info-with-description.card-info-with-metadata {
  372.     height: 50px !important;
  373. }
  374.  
  375. /* Remove section divider */
  376. .section-divider {
  377.     border-bottom: 0 !important;
  378. }
  379.  
  380. /* Adjust Position of border active tab in Nav bar at top
  381. and add little glowing effect
  382. */
  383. .nav.navbar-nav {
  384.     overflow: hidden !important;
  385. }
  386.  
  387. .nav.navbar-nav a {
  388.     overflow: visible !important;
  389. }
  390.  
  391. .nav.navbar-nav a::after {
  392.     bottom: 0px !important;
  393.     width: 100% !important;
  394. }
  395.  
  396. .nav.navbar-nav .active  a::after{
  397.     box-shadow: 0 0px 20px !important;
  398. }
  399.  
  400. .nav.navbar-nav a:focus:not(.button):active::after{
  401.     background-color: var(--modspotify_pressing_fg) !important;
  402. }
  403.  
  404. /* Notification bar */
  405. #content-wrapper #view-message-bar {
  406.     position: absolute !important;
  407.     width: calc(100% - 160px) !important;
  408.     margin-left: 80px !important;
  409.     border-radius: 0 0 10px 10px !important;
  410. }
  411.  
  412. /* Small cover Big cover mechanism */
  413. .now-playing.cover-size-transition.active.image-expanded #now-playing-image-small {
  414.     display: none;
  415. }
  416.  
  417. .now-playing.cover-size-transition.active.image-expanded .cover-image-link-wrapper {
  418.     flex: 0 1 10px;
  419. }
  420.  
  421. #view-now-playing a.image {
  422.     overflow: visible !important;
  423. }
  424.  
  425. /* Profile arrow in top left */
  426. .content-top-bar__profile-menu-button .dropdown {
  427.     position: fixed !important;
  428.     top: 10px !important;
  429.     -webkit-app-region: no-drag !important;
  430. }
  431.  
  432. /* [WINDOWS] Change Profile menu horizontal position */
  433. body.body-container--windows .content-top-bar__profile-menu-button .dropdown {
  434.     right: 190px !important;
  435. }
  436.  
  437. body:not(.body-container--windows) .content-top-bar__profile-menu-button .dropdown {
  438.     right: 20px !important;
  439. }
  440.  
  441. /* Small tooltip */
  442. #tooltip {
  443.     box-shadow: 0 0 10px rgba(0,0,0,0.2) !important;
  444.     border-radius: 5px !important;
  445.     border: 2px solid var(--modspotify_main_fg);
  446.     padding: 10px 10px;
  447. }
  448.  
  449. .tooltip-arrow-top, .tooltip-arrow-bottom {
  450.     display: none !important;
  451. }
  452.  
  453. .lyrics-lines-container,
  454. .message-container {
  455.     color: #FFFFFF !important;
  456. }
  457.  
  458. /* Home page */
  459. .GlueCarousel__grid-wrapper::-webkit-scrollbar-thumb {
  460.     display: none;
  461. }
  462.  
  463. .GlueCard__info-wrapper,
  464. .Card__info-wrapper {
  465.     margin-bottom: 30px;
  466. }
  467.  
  468. .card-horizontal-interior-wrapper .card-info-title {
  469.     text-align: start !important;
  470. }
  471.  
  472. .tl-row.selected:hover .tl-cell {
  473.     background: var(--modspotify_scrollbar_fg_and_selected_row_bg) !important;
  474. }
  475.  
  476. .GlueTableRow--is-selected {
  477.     background-color: var(--modspotify_scrollbar_fg_and_selected_row_bg) !important;
  478. }
  479.  
  480. .tracklist-podcast .tl-progress .row-progress__bar {
  481.     background-color: var(--modspotify_main_fg);
  482. }
  483.  
  484. .Header__background-color{
  485.     background-color: var(--modspotify_main_bg) !important;
  486. }
  487.  
  488. .Button--style-green,
  489. .button.button-green, .button.button-white {
  490.     border-radius: 4px;
  491.     color: var(--modspotify_main_bg) !important;
  492. }
  493.  
  494. .glue-page-header:not(.glue-page-header--album):not(.glue-page-header--playlist):not(.glue-page-header--artist):not(.glue-page-header--dailymix):not(.glue-page-header--user):not(.glue-page-header--show)
  495.     .glue-page-header__content-inner .glue-page-header__title-text,
  496. .HomeHeader .Header__content-inner .Header__title-text-inner,
  497. .MadeForYouHeader .Header__content-inner .Header__title-text-inner,
  498. .RecentlyPlayedPage__header .Header__content-inner .Header__title-text-inner {
  499.     background-color: var(--modspotify_main_bg);
  500.     padding: 5px 20px;
  501.     border: 5px solid var(--modspotify_main_fg) !important;
  502.     border-radius: 6px;
  503.     box-shadow: 0 4px 12px 0 rgba(var(--modspotify_rgb_cover_overlay_and_shadow),.2);
  504.     text-transform: uppercase;
  505. }
  506.  
  507. .glue-page-header.glue-page-header--album .glue-page-header__content-inner .glue-page-header__title,
  508. .glue-page-header.glue-page-header--artist .glue-page-header__content-inner .glue-page-header__title,
  509. .glue-page-header.glue-page-header--dailymix .glue-page-header__content-inner .glue-page-header__title,
  510. .glue-page-header.glue-page-header--playlist .glue-page-header__content-inner .glue-page-header__title {
  511.     margin-top: 10px;
  512. }
  513.  
  514. span.glue-page-header__title-text {
  515.     color: var(--modspotify_main_fg);
  516. }
  517.  
  518. .glue-page-header .glue-page-header__content-inner .glue-page-header__button {
  519.     margin-top: 40px;
  520. }
  521.  
  522. .glue-page-header__content-inner,
  523. .glue-page-header__data,
  524. .glue-page-header__title,
  525. .Header__content-inner,
  526. .Header__data,
  527. .Header__title,
  528. .Header__title-text,
  529. .Header__title-text-inner {
  530.     overflow: visible !important;
  531. }
  532.  
  533. /*Force player bar to has fixed height*/
  534. .view-player {
  535.     height: var(--bar-height) !important;
  536.     border-top: 0;
  537. }
  538.  
  539. .view-player .now-playing {
  540.     overflow: unset;
  541. }
  542.  
  543. .view-player .cover-image-container {
  544.     position: fixed !important;
  545.     left: 0;
  546.     bottom: 0;
  547. }
  548.  
  549. .view-player .now-playing .cover-image-link,
  550. .view-player .now-playing .cover-image-link figure {
  551.     width: var(--bar-height);
  552.     height: var(--bar-height);
  553. }
  554.  
  555. #now-playing-image-small .cover-image {
  556.     width: var(--bar-height);
  557.     height: var(--bar-height);
  558. }
  559.  
  560. .view-player .now-playing .cover-image-link-wrapper {
  561.     flex: 0 1 calc(var(--bar-height) + 10px);
  562. }
  563.  
  564. .text-container {
  565.     z-index: 3;
  566. }
  567.  
  568. .view-player .now-playing-container .button-add {
  569.     color: var(--modspotify_main_fg) !important;
  570. }
  571.  
  572. .progress-container .progress-bar,
  573. .progress-container .inner {
  574.     top: 0 !important;
  575.     margin-top: 0 !important;
  576.     height: 5px;
  577. }
  578.  
  579. .progress-container .progress-bar-wrapper {
  580.     top: 0 !important;
  581.     height: 5px;
  582. }
  583.  
  584. .progress-container {
  585.     position: fixed !important;
  586.     width: 100% !important;
  587.     bottom: var(--bar-height) !important;
  588.     margin : 0 !important;
  589. }
  590.  
  591. .progress-container .inner {
  592.     border-radius: 0 2px 2px 0 !important;
  593.     background-color: var(--modspotify_main_fg) !important;
  594.     box-shadow: 0 2px 2px 0 var(--modspotify_main_fg);
  595. }
  596.  
  597. .glue-page-header__p2s-details,
  598. .glue-page-header__p2s-followers {
  599.     display: none;
  600. }
  601.  
  602. .context-menu {
  603.     border: 2px solid var(--modspotify_main_fg);
  604.     box-shadow: 0 4px 12px 0 rgba(var(--modspotify_rgb_cover_overlay_and_shadow),.2);
  605.     border-radius: 7px !important;
  606.     overflow: hidden;
  607. }
  608.  
  609. #menu-wrapper ::-webkit-scrollbar {
  610.     display: none;
  611. }
  612.  
  613. #menu-wrapper {
  614.     border-right: 3px solid black;
  615.     border-image: linear-gradient(0deg, transparent , var(--modspotify_scrollbar_fg_and_selected_row_bg) 40%, var(--modspotify_scrollbar_fg_and_selected_row_bg) 60%, transparent 90%) 2 90%;
  616. }
  617.  
  618. .main-view-wrapper {
  619.     overflow: unset;
  620. }
  621.  
  622. .Button--style-icon-stroke:after,
  623. .Button--style-icon-stroke:hover:after,
  624. .Button--style-icon-stroke,
  625. .glue-page-header__button .button-icon-with-stroke,
  626. .glue-page-header__button .button-icon-with-stroke::after {
  627.     box-shadow: unset;
  628. }
  629.  
  630. .glue-page-header.glue-page-header--artist .glue-page-header__label {
  631.     padding-top: 10px;
  632. }
  633.  
  634. .glue-page-header.glue-page-header--artist.has-custom-image .glue-page-header__label {
  635.     padding-top: 8px;
  636. }
  637.  
  638. .glue-page-header__content .glue-page-header__label {
  639.     margin-left: -2px;
  640.     z-index: 2;
  641. }
  642.  
  643. .glue-page-header__label span,
  644. .Header__label span {
  645.     background-color: var(--modspotify_main_fg);
  646.     color: var(--modspotify_main_bg);
  647.     padding: 2px 10px;
  648. }
  649.  
  650. .glue-page-header__label .header-verified-check {
  651.     background-color: transparent;
  652. }
  653.  
  654. body.remotebar .view-player .player-bar-wrapper {
  655.     height: 100%;
  656. }
  657.  
  658. .SidebarListItem--is-active:after,
  659. .RootlistItem--is-active:after,
  660. /* For Linux */ #view-navigation-bar .item.active:after {
  661.     background-color: transparent;
  662.     background-image: linear-gradient(90deg, var(--modspotify_sidebar_indicator_and_hover_button_bg) , transparent);
  663.     opacity: 0.2;
  664.     bottom: unset;
  665.     top: 5%;
  666.     height: 90%;
  667.     width: 100%
  668. }
  669.  
  670. .Header__image-inner {
  671.     box-shadow: unset;
  672. }
  673.  
  674. /*Phosphorus-style Progress Bar!!*/
  675. .progress-container .inner {
  676.     border-radius: 0 5px 5px 0 !important;
  677.     background-color: var(--modspotify_slider) !important;
  678.     box-shadow: 0 0px 20px 0 var(--modspotify_slider_glow);
  679. }
  680.  
  681. /*Huge shoutout to adriankarlen for the clever thin scrollbar trick!*/
  682. ::-webkit-scrollbar {
  683.     height: 6px !important;
  684.     width: 6px !important;
  685.     background-color: transparent;
  686. }
  687.  
  688. /*Move the progess bar around a bit so the glow stands out*/
  689. .progress-container .progress-bar,
  690. .progress-container .inner {
  691.     top: 0 !important;
  692.     margin-top: 0px !important;
  693.     height: 5px;
  694. }
  695.  
  696. .progress-container .progress-bar-wrapper {
  697.     top: 0 !important;
  698.     height: 5px;
  699. }
  700.  
  701. /*Bottom bar too bright with the normal forground color, changed to be more subtle*/
  702. .view-player .remote-playback-bar {
  703.     background-color: var(--modspotify_slider_bg) !important;
  704. }
  705.  
Add Comment
Please, Sign In to add comment