From 93b7fe93e65abb36907355d999454d7bfb4059d9 Mon Sep 17 00:00:00 2001 From: FivePixels Date: Mon, 17 May 2021 20:25:59 -0500 Subject: initial Tidal commit --- user.css | 241 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 241 insertions(+) create mode 100644 user.css (limited to 'user.css') diff --git a/user.css b/user.css new file mode 100644 index 0000000..64f9287 --- /dev/null +++ b/user.css @@ -0,0 +1,241 @@ +/* + * _______ ___ ______ _______ ___ + * | || | | | | _ || | + * |_ _|| | | _ || |_| || | + * | | | | | | | || || | + * | | | | | |_| || || |___ + * | | | | | || _ || | + * |___| |___| |______| |__| |__||_______| + * + * By FivePixels (Dylan Bolger) + * https://github.com/FivePixels/Tidal + * Rewrite for + * - spicetify-cli v2 + * - Spotify UI Update + * Now with cool comments! + */ + +/* Set the font to Nationale if the system has it installed. Otherwise, rely on Spotify's default font */ +*, body { + font-family: Nationale, spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif; +} + +/* Set the now playing bar to have a 96px height */ +.Root__now-playing-bar { +height: 96px !important; +} + +/* Set the background color to main content */ +.Root__main-view, .b1b53e70887a91051a9d7dc85160fc6b-scss, ._235729a60d5e265806e8509d8633b779-scss { +background-color: var(--modspotify_main_bg) !important; +} + +/* Set player color */ +._82a78ff58d3fcba0cb9b8083fe6dd05c-scss { + background-color: var(--modspotify_sidebar_and_player_bg) !important; +} + +/* Hide scrollbars from sight */ +.os-theme-spotify>.os-scrollbar-vertical, .os-theme-spotify>.os-scrollbar-horizontal { +height: 0px !important; +width: 0px !important; + background-color: transparent !important; +} + +/* Light grey on hover over button */ +.player-controls__buttons > button:hover, .ddd8cad9b1eaa2858b617dd9cb8bf222-scss > button:hover, .bd8e0a9d1a2d5e35b1ae9b5e1a08237c-scss > button:hover { +cursor: pointer !important; +color: var(--modspotify_secondary_fg) !important; +} + +/* Make buttons clicky (and various other small changes */ +/* - Now Playing bar player buttons */ +.player-controls__buttons > button, .ddd8cad9b1eaa2858b617dd9cb8bf222-scss > button, .bd8e0a9d1a2d5e35b1ae9b5e1a08237c-scss > button { +cursor: pointer !important; +color: white !important; + background-color: transparent !important; +} + +/* - Progress remaining time button */ +.playback-bar__progress-time { + cursor: pointer !important; +} + +/* - Queue, playing device, and full screen buttons */ +.ExtraControls button { +cursor: pointer !important; +} + +/* - Context menu buttons */ +ul > li > a, ul > li > button, button > ul > li > button, li > div > a { +cursor: pointer !important; + text-decoration: none !important; +} + +/* - Set every instance of a button to have a pointer cursor */ +button { +cursor: pointer !important; +} + +/* Fix coloring on hover of main content */ +._7ae3a7b5ef70bce1740ff486c4467d56-scss { + background-color: transparent !important; + background-image: none !important; +} + +/* Fix top bar coloring to match UI background */ +._2411182f42f92a221e29c993de036981-scss { + background-color: var(--modspotify_sidebar_and_player_bg) !important; +} +._7f29d1db930e7882d0ee6099f36e3bc7-scss { +opacity: 1 !important; +} + +/* Remove defined line spacing and letter spacing in headers */ +h1, ._5acabdea2ee35e177c1df2bfde71d869-scss { + letter-spacing: unset !important; + padding: 0.2em 0px !important +} + +/* Set line height in Liked Songs content box + * (unset doesn't work correctly here) */ +._4927510282dae1bd4bce47f1df0bc361-scss { + line-height: 42px !important; +} + +/* Hide device playing bar */ +._3a923fa2dfd1f66547507cb7a617062d-scss { +display: none !important; +} + +/* Remove background gradient from artist/playlist page */ +._59ed5f1313c7c4b211995d2b6463683f-scss, ._898a0ac18270b333d95d8402650e2c46-scss, ._1066d722d4c5fe45076daa358de0a969-scss { + background-color: unset !important; +background: unset !important; +} + +/* Remove playlist art box shadow */ +._5d10f53f6ab203d3259e148b9f1c2278-scss { + -webkit-box-shadow: unset !important; + box-shadow: unset !important; + border-radius: 3px !important; +} + +/* Add enabled effect to now playing device button */ +.control-button--active { +color: var(--modspotify_sidebar_indicator_and_hover_button_bg) !important; + background-color: rgba(33, 254, 236, 0.16) !important; + border-radius: 10px !important; +} + +/* Add enabled effect to shuffle button and repeat button */ +._39234eb5c173f8b6de80ed73820b1be8-scss._2b9d3fe8c4a53ea94eb650fbbb9b0124-scss[aria-checked="true"], .ebfd411a126f1e7bea6133f21b4ef88e-scss[aria-checked="true"], .ebfd411a126f1e7bea6133f21b4ef88e-scss[aria-checked="mixed"] { +color: var(--modspotify_sidebar_indicator_and_hover_button_bg) !important; + background-color: rgba(33, 254, 236, 0.16) !important; + border-radius: 10px !important; +} + +/* Add extra spacing between queue and devices buttons */ +.ExtraControls__connect-device-picker { + padding-left: 5px !important; +} + +/* Remove dot from queue control button */ +.control-button--active-dot:after { +display: none !important; +} + +/* Update connect a device screen active device color */ +.connect-device-list-item--active, .connect-device-list-item--active .connect-device-list-item__device-subtitle, .connect-device-list-item--active .connect-device-list-item__icon .device { +color: var(--modspotify_sidebar_indicator_and_hover_button_bg) !important; +} + +/* Remove connect a device header image */ +.connect-header { +display: none !important; +} + +/* Roundify the now playing cover image and add styling */ +.cover-art .cover-art-image { + border-radius: 4px !important; +border: 2px solid #2a2a2a !important; + box-shadow: rgba(0, 0, 0, 0.24) 0px -6px 24px !important; +} + +/* Correct the active like button color */ +.a65d8d62fe56eed3e660b937a9be8a93-scss { +color: var(--modspotify_pressing_fg) !important; +} + +/* Style slider knob */ +.progress-bar__slider { +right: 5px !important; +width: 4px !important; +height: 12px !important; + border-radius: 50px !important; + box-shadow: 1px 1px 3px 1px rgba(0,0,0,.4) !important; +transition: opacity .15s ease !important; + margin-left: -2px !important; +} + +/* Style extra slider area to be clicky */ +.progress-bar__fg_wrapper { +cursor: pointer !important; +} + +/* Style volume button to be blue when not muted */ +.volume-bar__icon-button[title="Mute"] { +color: var(--modspotify_pressing_fg) !important; +} + +/* Remove dot from shuffle button and repeat button */ +._39234eb5c173f8b6de80ed73820b1be8-scss._2b9d3fe8c4a53ea94eb650fbbb9b0124-scss:after, .ebfd411a126f1e7bea6133f21b4ef88e-scss._46e671f2323a45b17a6f4a3d15c2961f-scss:after { +display: none !important; +} + +/* Color user button in all states */ + +button._3e75c7f07bdce28b37b45a5cd74ff371-scss:hover, button._3e75c7f07bdce28b37b45a5cd74ff371-scss { + background-color: #242528 !important; +color: white !important; +} + +/* Set big play button colors */ +._8e7d398e09c25b24232d92aac8a15a81-scss.e8b2fe03d4e4726484b879ed8ff6f096-scss { +color: black !important; +} + +/* Set profile picture edit radius */ +.da75596ab83a40e107b3f7b595dbb2d8-scss, ._1d71ba21c2abf4a5fa3372749097da09-scss { + border-radius: unset !important; +} + +/* Set minimum left side bar width */ +.Root__nav-bar, .a81b8921c08df1bc32cd0c686fa8951a-scss, .f555f5a061389067516970421bc48319-scss, ._4fac214bccd807d7c6fed21d4e0ea6de-scss { + min-width: 240px !important; +} +/* Set the minimum height to fix cover icon in navigation bar */ +._4fac214bccd807d7c6fed21d4e0ea6de-scss { + min-height: 240px !important; +} + +/* Set labels for playlists/albums container color to match UI */ +._83d9fef4ae69148dc1fc9b8323f8528b-scss._2dc8cce76d72af90f5e00e781db42541-scss { +background: var(--modspotify_sidebar_and_player_bg) !important; +} + +/* Change labels from uppercase to capitalize */ +._61f284de1c56917f93c55a3ae121ba1c-scss { + text-transform: capitalize !important; +} + +/* Set private session labels and images to appropriate colors */ +._468cbcb83a67b071632b5f31d2210c1b-scss, ._3ce917a66aee890dcea323f7aaeb1a87-scss { +color: var(--modspotify_sidebar_and_player_bg) !important; +} + +/* Set the equalizer GIF to a custom image with corrected color */ +._5814e6eb4f933d11bfa18c01b92eff76-scss { +content: url("https://user-images.githubusercontent.com/37427166/118517517-e4b4cc80-b6fc-11eb-9c6a-2ea1d5ae0a5c.gif") !important; +} + -- cgit v1.2.3