light-theme.css
1 /* 2 { 3 "name": "Abyss Neptune - Light", 4 "author": "@itzzexcel", 5 "description": "Abyss Neptune Light Theme for TIDAL (17/Jan/2025)" 6 } 7 */ 8 9 ::-webkit-scrollbar { 10 display: none; 11 } 12 13 :root { 14 --wave-color-solid-accent-fill: #666666; 15 --wave-color-solid-rainbow-yellow-fill: #666666; 16 --wave-color-solid-contrast-fill: #666666; 17 --wave-color-solid-base-brighter: #666666; 18 --wave-text-body-medium: #333333 !important; 19 --track-vibrant-color: #666666 !important; 20 --wave-color-opacity-contrast-fill-ultra-thin: #c0c0c0 !important; 21 --wave-color-solid-rainbow-yellow-darkest: #c0c0c0 !important; 22 --wave-color-solid-accent-dark: #555555; 23 } 24 25 /* Credits to https://github.com/surfbryce for the fonts */ 26 @font-face { 27 font-family: "AbyssFont"; 28 font-weight: 400; 29 src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2") format("woff2"); 30 } 31 32 @font-face { 33 font-family: "AbyssFont"; 34 font-weight: 500; 35 src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2") format("woff2"); 36 } 37 38 @font-face { 39 font-family: "AbyssFont"; 40 font-weight: 600; 41 src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2") format("woff2"); 42 } 43 44 @font-face { 45 font-family: "AbyssFont"; 46 font-weight: 700; 47 src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2"); 48 } 49 50 [class^="followingButton"], 51 [title="Unfollow"], 52 [title="Follow"], 53 [title="Unfollow"]>span, 54 [title="Follow"]>span { 55 background-color: var(--wave-color-solid-rainbow-yellow-fill) !important; 56 color: var(--wave-color-solid-base-brighter); 57 } 58 59 [class^="_wave-badge-color-max"] { 60 color: #333333 !important; 61 background-color: var(--wave-color-solid-accent-fill); 62 border-radius: 3px; 63 } 64 65 [data-test="main-layout-sidebar-wrapper"] { 66 border-right: rgb(230, 230, 230) 1px solid; 67 background-color: rgba(250, 250, 250, 0.95) !important; 68 } 69 70 [class^="_wave-badge"] { 71 background-color: var(--wave-color-solid-accent-fill); 72 border-radius: 4px; 73 color: #333333; 74 } 75 76 [class^="_progressBarWrapper"] { 77 color: var(--wave-color-solid-accent-fill) !important; 78 } 79 80 [class^="_sidebarItem"]>span { 81 color: #666666; 82 } 83 84 [data-test="main-layout-header"] { 85 border-left: 0 !important; 86 } 87 88 [class^="_sidebarItem"]:hover span { 89 color: #333333; 90 } 91 92 [class^="_sidebarItem"] [class^="active"]>span { 93 color: #333333 !important; 94 } 95 96 /* Sidebar icons and text - ensure grey colors */ 97 [data-test="main-layout-sidebar-wrapper"] svg, 98 [data-test="main-layout-sidebar-wrapper"] path, 99 [class^="_sidebarItem"] svg, 100 [class^="_sidebarItem"] path { 101 fill: #666666 !important; 102 color: #666666 !important; 103 } 104 105 [data-test="main-layout-sidebar-wrapper"] span, 106 [class^="_sidebarItem"] span { 107 color: #666666 !important; 108 } 109 110 [class^="_active"] { 111 color: var(--wave-color-solid-accent-fill) !important; 112 } 113 114 [class^="ReactVirtualized__Grid"] { 115 border-radius: 10px; 116 margin: 5px; 117 } 118 119 [data-test="media-table"]>div>div>div { 120 border: 1px solid rgb(230, 230, 230) !important; 121 } 122 123 [class^="ReactVirtualized__Grid__innerScrollContainer"] { 124 border: none; 125 margin: 5px; 126 } 127 128 [class^="button"]>span { 129 color: #333333; 130 } 131 132 133 134 [class^="_explicitBadge"] { 135 color: var(--wave-color-solid-accent-fill); 136 } 137 138 [class^="viewAllButton"] { 139 border-radius: 4px; 140 display: grid; 141 place-items: center; 142 } 143 144 [data-test="current-media-imagery"] { 145 border: 0 !important; 146 margin: none; 147 } 148 149 [class^="_imageBorder"] { 150 display: none; 151 } 152 153 [class^="_headerButtons"]>button, 154 [class^="_headerButtons"]>button>span, 155 [data-test="toggle-picture-in-picture"] { 156 background-color: var(--wave-color-solid-accent-fill) !important; 157 color: #333333; 158 } 159 160 [class^="_container"]>[class^="_navigationArrows"] { 161 color: #333333; 162 background-color: var(--wave-color-solid-accent-fill) !important; 163 border-radius: 4px; 164 } 165 166 [class^="_buttons"]>button>span { 167 color: #333333 !important; 168 } 169 170 [class^="_container"]>button { 171 border: 0px none; 172 } 173 174 175 [data-test="feed-sidebar"] { 176 margin-top: 10px; 177 } 178 179 [data-test="footer-player"] { 180 width: calc(100% - 20px); 181 bottom: 10px; 182 left: 10px; 183 border: 1px solid rgba(200, 200, 200, 0.7); 184 border-radius: 4px !important; 185 position: absolute !important; 186 } 187 188 [class^="_tooltipContainer"]>button { 189 background-color: var(--wave-color-solid-accent-fill); 190 color: #333333; 191 } 192 193 [class^="_tooltipContainer"]>button:hover { 194 background-color: #555555 !important; 195 } 196 197 [class^="_tableRow"]:hover>*, 198 [data-test-is-playing="true"]>* { 199 color: #333333 !important; 200 } 201 202 [class^="_tableRow"]>*, 203 [data-test-is-playing="false"]>* { 204 color: #333333 !important; 205 } 206 207 /* Track list text - ensure all text is dark */ 208 [data-test="media-table"] *, 209 [class^="_trackTitle"], 210 [class^="_artistName"], 211 [class^="_albumTitle"], 212 [class^="_tableCell"] *, 213 [class^="_tableCellContent"] * { 214 color: #333333 !important; 215 } 216 217 [class*="coverColumn"] { 218 padding-left: 5px !important; 219 } 220 221 [class^="actionList"] { 222 background-color: transparent; 223 margin: 0px; 224 border-radius: 5px; 225 } 226 227 button[data-test="request-fullscreen"], 228 button[data-test="close-now-playing"], 229 button[data-test="play-all"], 230 button[data-test="shuffle-all"] { 231 color: #333333; 232 background-color: var(--wave-color-solid-accent-fill); 233 border-radius: 12px; 234 } 235 236 button[data-test="request-fullscreen"]:hover, 237 button[data-test="close-now-playing"]:hover { 238 color: #333333; 239 background-color: #aaaaaa !important; 240 } 241 242 .neptune-switch-checkbox:checked+.neptune-switch { 243 background-color: rgba(0, 0, 0, 0.1); 244 } 245 246 [data-test="navigation-arrows"]>button { 247 background-color: var(--wave-color-solid-accent-fill) !important; 248 color: #333333 !important; 249 border-radius: 5px; 250 } 251 252 [data-test="navigation-arrows"]>button:disabled { 253 background-color: #cccccc !important; 254 opacity: 1; 255 } 256 257 [data-test="main-layout-header"] { 258 background-color: rgba(235, 235, 235, 0.95) !important; 259 backdrop-filter: blur(10px); 260 border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin) !important; 261 } 262 263 [data-test="feed-sidebar"] { 264 background-color: rgba(225, 225, 225, 0.9) !important; 265 backdrop-filter: blur(10px); 266 border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin) !important; 267 } 268 269 [data-test="stream-metadata"] { 270 background-color: rgba(230, 230, 230, 0.92) !important; 271 backdrop-filter: blur(10px); 272 border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin) !important; 273 } 274 275 [data-test="footer-player"] { 276 background-color: rgba(255, 255, 255, 0.6) !important; 277 backdrop-filter: blur(15px); 278 border: 1px solid rgba(200, 200, 200, 0.7) !important; 279 } 280 281 [data-wave-color=textUrl] { 282 color: var(--wave-color-solid-accent-fill); 283 } 284 285 [class^="_smallHeader"] { 286 margin-top: 7.5px; 287 } 288 289 /* Button styling using proper light theme approach */ 290 :root { 291 --button-light: #d9d9d9 !important; 292 --button-medium: #cbcbcb !important; 293 } 294 295 /*buttons*/ 296 ._activeTab_f47dafa { 297 background: #0000001c; 298 } 299 300 /*canvas nav buttons*/ 301 .viewAllButton--Nb87U, 302 .css-7l8ggf { 303 background: #e0e0e0; 304 } 305 306 .viewAllButton--Nb87U:hover, 307 .css-7l8ggf:hover { 308 background: #cbcbcb; 309 } 310 311 /*tracks page*/ 312 .variantPrimary--pjymy, 313 ._button_3357ce6 { 314 background-color: var(--button-light); 315 } 316 317 ._button_f1c7fcb { 318 background: var(--wave-color-solid-base-brighter); 319 } 320 321 ._button_84b8ffe { 322 background-color: var(--wave-color-solid-base-brighter); 323 } 324 325 ._button_84b8ffe:hover { 326 background-color: var(--wave-color-solid-base-brightest); 327 } 328 329 .button--_0I_t { 330 background-color: var(--button-light); 331 } 332 333 .button--_0I_t:hover { 334 background-color: var(--wave-color-opacity-contrast-fill-regular); 335 } 336 337 ._button_94c5125 { 338 background: var(--wave-color-solid-base-brighter); 339 } 340 341 .primary--NLSX4 { 342 background-color: #d5d5d5; 343 } 344 345 .primary--NLSX4:hover { 346 background-color: var(--wave-color-opacity-contrast-fill-regular) !important; 347 } 348 349 .primary--NLSX4:disabled { 350 background-color: #e7e7e8; 351 } 352 353 .primary--NLSX4:disabled:hover { 354 background-color: #e7e7e8; 355 } 356 357 [class^="__NEPTUNE_PAGE"], 358 [data-test="main"] { 359 margin-top: 35px; 360 } 361 362 [data-test="button-desktop-release-notes"], 363 [data-test="button-release-notes"] { 364 background-color: #333333; 365 } 366 367 [data-test="button-desktop-release-notes"]:hover, 368 [data-test="button-release-notes"]:hover { 369 background-color: #555555 !important; 370 transition: none !important; 371 } 372 373 #playQueueSidebar { 374 top: 50px !important; 375 border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin); 376 margin: 2px; 377 margin-right: -14px !important; 378 background-color: rgba(220, 220, 220, 0.9) !important; 379 backdrop-filter: blur(10px); 380 } 381 382 [class^="_bottomGradient"] { 383 visibility: hidden; 384 } 385 386 [data-test="settings-page"] { 387 padding-bottom: 60px !important; 388 } 389 390 [data-test="query-suggestions"], 391 [data-test="recent-searches-container"] { 392 background-color: rgba(227, 227, 227, 0.85); 393 backdrop-filter: blur(10px); 394 } 395 396 [data-test="contextmenu"] { 397 border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin) !important; 398 } 399 400 [class^="_dataContainer_"]::before { 401 background-image: var(--img); 402 filter: blur(10px) brightness(1.2); 403 } 404 405 /* Player bar text colors - fix white text issues */ 406 [data-test="footer-player"] * { 407 color: #333333 !important; 408 } 409 410 [data-test="footer-player"] [class*="trackTitle"], 411 [data-test="footer-player"] [class*="artistName"], 412 [data-test="footer-player"] [class*="trackInfo"], 413 [data-test="footer-player"] [class*="duration"], 414 [data-test="footer-player"] [class*="time"], 415 [data-test="footer-player"] [class*="timestamp"] { 416 color: #333333 !important; 417 } 418 419 /* Main page background */ 420 body, 421 [data-test="main"], 422 [class^="__NEPTUNE_PAGE"] { 423 background-color: #f5f5f5 !important; 424 }