chore: blur theme style tweaks · burrito.space/diffuse@5ee5c79

+41 -44

src/themes/blur/artwork-controller/element.css

··· 52 52 letter-spacing: var(--tracking-wide); 53 53 line-height: 0.75; 54 54 padding: calc(var(--space-2xs) * 0.8) calc(var(--space-2xs) * 0.65); 55 - padding-bottom: calc(var(--space-2xs) * 0.8 - 1px); 55 + padding-bottom: calc(var(--space-2xs) * 0.575); 56 56 position: absolute; 57 57 text-box: trim-both cap alphabetic; 58 58 text-transform: uppercase; ··· 98 98 padding-top: 0; 99 99 position: relative; 100 100 101 - @container (min-width: 35em) { 101 + @container (min-width: 28em) { 102 102 padding: var(--space-md); 103 103 padding-top: 0; 104 104 } ··· 113 113 } 114 114 115 115 .controller__inner { 116 - margin-top: calc(var(--space-sm) * -1); 116 + margin-top: calc(var(--space-lg) * -1); 117 117 position: relative; 118 118 transition-duration: var(--transition-durition); 119 119 transition-property: color; ··· 124 124 color: rgba(0, 0, 0, 0.6); 125 125 } 126 126 127 - /* Button row */ 128 - 129 - .button-row { 130 - display: inline-flex; 131 - gap: 1px; 127 + /* Now playing */ 132 128 133 - button { 134 - background: color-mix(in oklch, currentColor 7.5%, transparent); 135 - border: 0; 136 - color: color-mix(in oklch, currentColor 50%, transparent); 137 - cursor: pointer; 138 - font-size: 110%; 139 - padding: calc(var(--space-2xs) + 1px) var(--space-sm) var(--space-2xs); 140 - 141 - &[data-enabled="t"] { 142 - background-color: color-mix(in oklch, currentColor 25%, transparent); 143 - color: currentColor; 144 - } 145 - } 146 - 147 - button:first-child { 148 - border-bottom-left-radius: var(--radius-xl); 149 - border-top-left-radius: var(--radius-xl); 150 - } 151 - 152 - button:last-child { 153 - border-bottom-right-radius: var(--radius-xl); 154 - border-top-right-radius: var(--radius-xl); 155 - } 129 + .now-playing { 130 + align-items: center; 131 + display: flex; 132 + gap: var(--space-xs); 156 133 } 157 - 158 - /* Now playing */ 159 134 160 135 cite { 161 136 display: block; 137 + flex: 1; 162 138 font-style: normal; 139 + min-width: 0; 163 140 text-shadow: var(--text-shadow-sm); 164 141 165 142 & > span, ··· 171 148 } 172 149 } 173 150 151 + .fav-button { 152 + background: color-mix(in oklch, currentColor 7.5%, transparent); 153 + border: 0; 154 + border-radius: var(--radius-xl); 155 + color: color-mix(in oklch, currentColor 50%, transparent); 156 + cursor: pointer; 157 + flex-shrink: 0; 158 + font-size: 110%; 159 + padding: calc(var(--space-2xs) + 1px) var(--space-sm) var(--space-2xs); 160 + 161 + &[data-enabled="t"] { 162 + background-color: color-mix(in oklch, currentColor 25%, transparent); 163 + color: currentColor; 164 + } 165 + } 166 + 174 167 .controller__inner--light-mode cite { 175 168 text-shadow: none; 176 169 } ··· 207 200 align-items: center; 208 201 display: flex; 209 202 font-size: 230%; 210 - gap: var(--space-lg); 203 + gap: var(--space-md); 211 204 justify-content: center; 212 205 margin: var(--space-xs) 0; 213 206 padding: 0; 214 207 text-align: center; 215 208 216 209 @container (min-width: 28em) { 210 + gap: var(--space-lg); 217 211 margin: var(--space-sm) 0; 218 212 } 219 213 220 214 @container (min-width: 35em) { 221 215 margin: var(--space-md) 0; 222 216 } 217 + 218 + @container (min-width: 70em) { 219 + gap: var(--space-xl); 220 + } 223 221 } 224 222 225 223 .controller .menu__loader { ··· 233 231 list-style: none; 234 232 transition-duration: var(--transition-durition); 235 233 transition-property: opacity; 234 + 235 + &[data-enabled="f"] { 236 + opacity: 0.4; 237 + } 236 238 } 237 239 238 240 .controller .ph-pause, 239 241 .controller .ph-play, 240 242 .controller .menu__loader { 241 243 font-size: 130%; 244 + } 245 + 246 + .controller .ph-shuffle, 247 + .controller .ph-repeat { 248 + font-size: 55%; 242 249 } 243 250 244 251 /* Volume */ ··· 259 266 260 267 .volume i { 261 268 cursor: pointer; 262 - } 263 - 264 - /* Footer */ 265 - 266 - footer { 267 - align-items: center; 268 - display: flex; 269 - gap: var(--space-2xs); 270 - justify-content: center; 271 - margin-top: var(--space-sm); 272 269 } 273 270 274 271 /* Gradient blur */

+67 -44

src/themes/blur/artwork-controller/element.js

··· 95 95 /** @type {RepeatShuffleEngine} */ 96 96 const repeatShuffle = query(this, "repeat-shuffle-engine-selector"); 97 97 98 - whenElementsDefined({ artwork, controller, favourites, input, repeatShuffle }) 98 + whenElementsDefined({ 99 + artwork, 100 + controller, 101 + favourites, 102 + input, 103 + repeatShuffle, 104 + }) 99 105 .then( 100 106 () => { 101 107 this.$artwork.value = artwork; ··· 191 197 index: (currArtwork.current?.index ?? 0) + 1, 192 198 loaded: false, 193 199 url: URL.createObjectURL( 194 - new Blob([/** @type {ArrayBuffer} */ (bytes.buffer)], { type: mime }), 200 + new Blob([/** @type {ArrayBuffer} */ (bytes.buffer)], { 201 + type: mime, 202 + }), 195 203 ), 196 204 }; 197 205 })() ··· 326 334 const percentage = target ? event.offsetX / target.clientWidth : 0; 327 335 const audioId = this.$controller.value?.$queue.value?.now()?.id; 328 336 329 - if (audioId) this.$controller.value?.$audio.value?.seek({ audioId, percentage }); 337 + if (audioId) { 338 + this.$controller.value?.$audio.value?.seek({ audioId, percentage }); 339 + } 330 340 }; 331 341 332 342 /** ··· 390 400 @load="${this.artworkLoaded}" 391 401 data-hash="${art.hash}" 392 402 src="${art.url}" 393 - style="opacity: ${art.loaded ? `1` : `0`}" 403 + style="opacity: ${art.loaded 404 + ? `1` 405 + : `0`}; pointer-events: ${art.loaded ? `auto` : `none`};" 394 406 /> 395 407 `); 396 408 }); ··· 405 417 `var(--color-3)`}; opacity: 0;"> 406 418 <section class="artwork"> 407 419 <label 408 - style="display: ${this.group === DEFAULT_GROUP ? `none` : `block`}; cursor: pointer;" 420 + style="display: ${this.group === DEFAULT_GROUP 421 + ? `none` 422 + : `block`}; cursor: pointer;" 409 423 @click="${() => { 410 424 const base = document.baseURI; 411 - const facetUrl = new URL("themes/blur/artwork-controller/facet/index.html", base); 425 + const facetUrl = new URL( 426 + "themes/blur/artwork-controller/facet/index.html", 427 + base, 428 + ); 412 429 facetUrl.searchParams.set("group", this.group); 413 430 const loaderUrl = new URL("l/", base); 414 - loaderUrl.searchParams.set("path", facetUrl.pathname.slice(1) + facetUrl.search); 431 + loaderUrl.searchParams.set( 432 + "path", 433 + facetUrl.pathname.slice(1) + facetUrl.search, 434 + ); 415 435 window.open(loaderUrl.toString(), "_blank"); 416 436 }}" 417 437 > ··· 443 463 <section class="controller__inner"> 444 464  445 465 446 - <cite> 447 - <strong>${activeQueueItem?.tags?.title || 448 - "Diffuse"}</strong> 449 - <span style="font-style: ${activeQueueItem 450 - ? `normal` 451 - : `italic`}"> 452 - ${activeQueueItem?.tags?.artist ?? 453 - (activeQueueItem ? `` : `Waiting on queue ...`)} 454 - </span> 455 - </cite> 466 + <div class="now-playing"> 467 + <cite> 468 + <strong>${activeQueueItem?.tags?.title || 469 + "Diffuse"}</strong> 470 + <span style="font-style: ${activeQueueItem 471 + ? `normal` 472 + : `italic`}"> 473 + ${activeQueueItem?.tags?.artist ?? 474 + (activeQueueItem ? `` : `Waiting on queue ...`)} 475 + </span> 476 + </cite> 477 + <button 478 + class="fav-button" 479 + title="Toggle favourite" 480 + data-enabled="${isFav ? `t` : `f`}" 481 + @click="${this.toggleFavourite}" 482 + > 483 + <i class="ph-${isFav ? `fill` : `bold`} ph-heart"></i> 484 + </button> 485 + </div> 456 486 457 487  458 488 ··· 471 501  472 502 473 503 <menu> 504 +  505 + <li @click="${this.toggleRepeat}" data-enabled="${isRepeat 506 + ? `t` 507 + : `f`}"> 508 + <i class="ph-${isRepeat 509 + ? `fill` 510 + : `bold`} ph-repeat" title="Toggle repeat"></i> 511 + </li> 512 + 474 513  475 514 <li @click="${this.previous}"> 476 515 <i class="ph-fill ph-rewind" title="Previous track"></i> ··· 509 548 <li @click="${this.next}"> 510 549 <i class="ph-fill ph-fast-forward" title="Next track"></i> 511 550 </li> 551 + 552 +  553 + <li @click="${this.toggleShuffle}" data-enabled="${isShuffle 554 + ? `t` 555 + : `f`}"> 556 + <i class="ph-${isShuffle 557 + ? `fill` 558 + : `bold`} ph-shuffle" title="Toggle shuffle"></i> 559 + </li> 512 560 </menu> 513 561 514 562  ··· 516 564 <div class="volume"> 517 565 <i @click="${this.mute}" class="ph-fill ph-speaker-none"></i> 518 566 <div @click="${this.setVolume}" class="progress-bar"> 519 - <progress max="100" value="${(this.$controller.value?.$audio.value?.volume() ?? 567 + <progress max="100" value="${(this.$controller.value?.$audio 568 + .value?.volume() ?? 520 569 0) * 100}"></progress> 521 570 </div> 522 571 <i @click="${this 523 572 .fullVolume}" class="ph-fill ph-speaker-high"></i> 524 573 </div> 525 - 526 - <footer> 527 - <div class="button-row"> 528 - <button 529 - title="Toggle repeat" 530 - data-enabled="${isRepeat ? `t` : `f`}" 531 - @click="${this.toggleRepeat}" 532 - > 533 - <i class="ph-${isRepeat ? `fill` : `bold`} ph-repeat"></i> 534 - </button> 535 - <button 536 - title="Toggle favourite" 537 - data-enabled="${isFav ? `t` : `f`}" 538 - @click="${this.toggleFavourite}" 539 - > 540 - <i class="ph-${isFav ? `fill` : `bold`} ph-heart"></i> 541 - </button> 542 - <button 543 - title="Toggle shuffle" 544 - data-enabled="${isShuffle ? `t` : `f`}" 545 - @click="${this.toggleShuffle}" 546 - > 547 - <i class="ph-${isShuffle ? `fill` : `bold`} ph-shuffle"></i> 548 - </button> 549 - </div> 550 - </footer> 551 574 </section> 552 575 </section> 553 576 </main>

+10 -4

src/themes/blur/facet/index.css

··· 53 53 54 54 @media (min-width: 35rem) { 55 55 display: grid; 56 - grid-template-columns: repeat(3, 1fr); 56 + grid-template-columns: repeat(10, 1fr); 57 57 grid-template-rows: 1fr; 58 58 } 59 59 ··· 64 64 65 65 @media (min-width: 84rem) { 66 66 gap: var(--space-lg); 67 - padding: var(--space-2xl) var(--space-xl); 67 + padding: var(--space-2xl) var(--space-md); 68 + } 69 + 70 + @media (min-width: 126rem) { 71 + padding: var(--space-3xl) 0; 68 72 } 69 73 } 70 74 ··· 84 88 85 89 db-artwork-controller, 86 90 #settings-panel { 87 - grid-column: 3; 91 + grid-column: 8 / span 3; 88 92 grid-row: 1; 89 93 min-height: 50vh; 90 94 } 91 95 92 96 db-browser { 93 - grid-column: 1 / span 2; 97 + grid-column: 1 / span 7; 94 98 grid-row: 1 / span 2; 95 99 } 96 100 ··· 355 359 display: flex; 356 360 font-size: var(--fs-sm); 357 361 gap: var(--space-2xs); 362 + grid-column: 8 / span 3; 363 + grid-row: 2; 358 364 359 365 button, 360 366 a {

Configure Feed

Configure Feed