diff options
| -rw-r--r-- | LICENSE | 21 | ||||
| -rw-r--r-- | README.md | 13 | ||||
| -rw-r--r-- | color.ini | 18 | ||||
| -rw-r--r-- | user.css | 241 |
4 files changed, 293 insertions, 0 deletions
@@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 FivePixels + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..98aee69 --- /dev/null +++ b/README.md @@ -0,0 +1,13 @@ +# Tidal +Tidal is a spicetify-cli theme based on TIDAL. +## Features + - Colors match TIDAL + - Font matches TIDAL (font is not provided with theme) + - Buttons are clicky (pointer interacts with buttons like links) + - Scrollbars removed + +The source code has comments indicating what changes are being made. + +## Font +The font mentioend above is named Nationale. You will have to source this on your own. If you do not have this font installed on your system, Spotify's defaults will be used. + diff --git a/color.ini b/color.ini new file mode 100644 index 0000000..250709e --- /dev/null +++ b/color.ini @@ -0,0 +1,18 @@ +[Base] + +main_fg = FFFFFF +secondary_fg = 9898A6 +main_bg = 17171A +sidebar_and_player_bg = 242528 +cover_overlay_and_shadow = 000000 +indicator_fg_and_button_bg = FFFFFF +pressing_fg = 00FFFF +slider_bg = 555753 +sidebar_indicator_and_hover_button_bg = 00FFFF +scrollbar_fg_and_selected_row_bg = 5A5A5A +pressing_button_fg = F2EFEA +pressing_button_bg = 525253 +selected_button = FFFFFF +miscellaneous_bg = FFFFFF +miscellaneous_hover_bg = 00FFFF +preserve_1 = FFFFFF
\ No newline at end of file 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; +} + |