Spotify Side Mode

Re-arrange elements in now playing bar to fit narrow window.

  1. /* ==UserStyle==
  2. @name Spotify Side Mode
  3. @namespace https://github.com/dearrrfish/my-userscripts
  4. @version 1.0.0
  5. @description Re-arrange elements in now playing bar to fit narrow window.
  6. @author dearrrfish
  7. @license MIT
  8. @homepageURL https://github.com/dearrrfish/my-userscripts
  9. @supportURL https://github.com/dearrrfish/my-userscripts/issues
  10. ==/UserStyle== */
  11.  
  12. body {
  13. font-family: Microsoft Yahei;
  14. }
  15.  
  16. @media screen and (max-width: 700px) {
  17. body {
  18. min-width: unset;
  19. }
  20.  
  21. .now-playing-bar-container {
  22. min-width: unset
  23. }
  24.  
  25. .now-playing-bar {
  26. width: 100%;
  27. min-height: 70px;
  28. padding: 10px 20px;
  29. height: unset;
  30. display: flex;
  31. flex-direction: row;
  32. flex-wrap: wrap;
  33. }
  34.  
  35. .now-playing-bar__left {
  36. width: auto;
  37. order: 1;
  38. }
  39.  
  40. .now-playing-bar__center {
  41. width: 100%;
  42. order: 3;
  43. }
  44.  
  45. .now-playing-bar__right {
  46. max-width: 25%;
  47. min-width: unset;
  48. order: 2;
  49. }
  50.  
  51. .now-playing-bar__right__inner {
  52. width: 100%;
  53. }
  54. }