From 265363db54d31b17ed41d4ea1dadbb50789c3644 Mon Sep 17 00:00:00 2001 From: psykose Date: Mon, 25 Nov 2024 20:18:10 +0100 Subject: [PATCH] make everything worse for no reason --- Cargo.lock | 4 +- resources/album_carousel.blp | 44 +++++++++++++++++----- resources/play_queue.blp | 10 +++-- resources/playbar.blp | 11 +++++- resources/style.css | 71 +++++++++++++++++++++--------------- 5 files changed, 94 insertions(+), 46 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index b1a3c32..734d0c5 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1590,9 +1590,9 @@ dependencies = [ [[package]] name = "itoa" -version = "1.0.13" +version = "1.0.14" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "540654e97a3f4470a492cd30ff187bc95d89557a903a2bbf112e2fae98104ef2" +checksum = "d75a2a4b1b190afb6f5425f10f6a8f959d2ea0b9c2b1d79553551850539e4674" [[package]] name = "js-sys" diff --git a/resources/album_carousel.blp b/resources/album_carousel.blp index 3bd2649..151e678 100644 --- a/resources/album_carousel.blp +++ b/resources/album_carousel.blp @@ -2,7 +2,9 @@ using Gtk 4.0; using Adw 1; template $AudreyUiAlbumCarousel: Adw.Bin { - styles [ "album-carousel" ] + styles [ + "album-carousel" + ] child: Box { orientation: vertical; @@ -14,13 +16,20 @@ template $AudreyUiAlbumCarousel: Adw.Bin { Label { label: bind template.title; - styles [ "title-2" ] + + styles [ + "title-2" + ] } - Button { + Button { valign: center; icon-name: "view-refresh-symbolic"; - styles [ "circular", "flat" ] + + styles [ + "circular", + "flat" + ] } Box { @@ -28,19 +37,29 @@ template $AudreyUiAlbumCarousel: Adw.Bin { hexpand: true; valign: center; - Button { + Button { icon-name: "go-previous-symbolic"; - styles [ "flat" ] + + styles [ + "flat" + ] } Button { icon-name: "go-next-symbolic"; - styles [ "flat" ] + + styles [ + "flat" + ] } } } - Separator { styles [ "spacer" ] } + Separator { + styles [ + "spacer" + ] + } ScrolledWindow { hexpand: true; @@ -63,6 +82,10 @@ template $AudreyUiAlbumCarousel: Adw.Bin { factory: BuilderListItemFactory { template ListItem { child: Box { + styles [ + "album" + ] + orientation: vertical; margin-bottom: 6; spacing: 6; @@ -75,7 +98,10 @@ template $AudreyUiAlbumCarousel: Adw.Bin { } Box { - styles [ "labels" ] + styles [ + "labels" + ] + orientation: vertical; homogeneous: true; diff --git a/resources/play_queue.blp b/resources/play_queue.blp index a8d5851..2b1469c 100644 --- a/resources/play_queue.blp +++ b/resources/play_queue.blp @@ -33,15 +33,19 @@ template $AudreyUiPlayQueue: Adw.Bin { [overlay] ProgressBar pulse_bar { - styles [ "osd" ] + styles [ + "osd" + ] + valign: start; } child: Picture { - styles [ "playing-cover-art" ] + styles [ + "playing-cover-art" + ] valign: center; - halign: center; paintable: bind template.playing-cover-art; }; diff --git a/resources/playbar.blp b/resources/playbar.blp index 8d13810..4ac2ab1 100644 --- a/resources/playbar.blp +++ b/resources/playbar.blp @@ -158,7 +158,10 @@ template $AudreyUiPlaybar: Adw.Bin { [end] Box end { Separator { - styles ["spacer"] + styles [ + "spacer" + ] + hexpand: true; } @@ -196,5 +199,9 @@ template $AudreyUiPlaybar: Adw.Bin { // make sure the middle is centered always SizeGroup { mode: horizontal; - widgets [start, end] + + widgets [ + start, + end + ] } diff --git a/resources/style.css b/resources/style.css index ef70524..9f80e8d 100644 --- a/resources/style.css +++ b/resources/style.css @@ -2,20 +2,23 @@ toolbarview#main { /* from amberol */ background: linear-gradient( - 127deg, - color-mix(in srgb, var(--background-color-0) 55%, transparent), - color-mix(in srgb, var(--background-color-0) 0%, transparent) 70.71%), + 111deg, + oklch(from var(--background-color-0) l c h / 0.55), + oklch(from var(--background-color-0) l c h / 0) 65% + ), linear-gradient( - 217deg, - color-mix(in srgb, var(--background-color-1) 55%, transparent), - color-mix(in srgb, var(--background-color-1) 0%, transparent) 70.71%), + 222deg, + oklch(from var(--background-color-1) l c h / 0.55), + oklch(from var(--background-color-1) l c h / 0) 65% + ), linear-gradient( - 336deg, - color-mix(in srgb, var(--background-color-2) 55%, transparent), - color-mix(in srgb, var(--background-color-2) 0%, transparent) 70.71%); + 333deg, + oklch(from var(--background-color-2) l c h / 0.55), + oklch(from var(--background-color-2) l c h / 0) 65% + ); transition-property: background; - transition-duration: 250ms; - transition-timing-function: ease; + transition-duration: 450ms; + transition-timing-function: cubic-bezier(0.13, 0.6, 0.8, 0.5); } #seek-scale slider { @@ -25,15 +28,6 @@ toolbarview#main { min-height: 10px; } -#seek-scale trough { - background: - linear-gradient( - 150deg, - color-mix(in srgb, var(--background-color-1) 16%, transparent), - color-mix(in srgb, var(--background-color-2) 16%, transparent) 70%); - box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px; -} - #seek-scale trough highlight { background-color: var(--background-color-0); } @@ -49,7 +43,7 @@ toolbarview#main { } #play-queue listview { - background-color: rgba(0,0,0,0); + background-color: oklch(0 0 0 / 0); } /* make drag and drop indicator take up entire perimeter */ @@ -58,7 +52,7 @@ toolbarview#main { } #play-queue .playing { - background-color: color-mix(in srgb, var(--accent-bg-color) 40%, transparent); + background-color: color-mix(in oklch, var(--accent-bg-color) 40%, transparent); } #play-queue .playing label.title { @@ -66,7 +60,7 @@ toolbarview#main { } gridview.albums { - background-color: rgba(0,0,0,0); + background-color: oklch(0 0 0 / 0); } gridview.albums child { @@ -79,7 +73,7 @@ gridview.albums child image { #play-queue-page picture.playing-cover-art { border-radius: 10px; - box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 7px; + box-shadow: oklch(0 0 0 / 0.6) 0px 0px 7px; } .loading-cover picture.playing-cover-art { @@ -89,7 +83,7 @@ gridview.albums child image { /* album carousel */ .album-carousel listview { - background-color: rgba(0,0,0,0); + background-color: oklch(0 0 0 / 0); } .album-carousel listview row { @@ -99,15 +93,32 @@ gridview.albums child image { .album-carousel listview row image { border-radius: 3px; - background-color: #000; + background-color: oklch(0 0 0); } .album-carousel .labels { border-radius: 3px; +} + +#seek-scale trough, .album-carousel .labels { + /* sort of adjusted rotation of the toolbarview idk */ background: linear-gradient( - 150deg, - color-mix(in srgb, var(--background-color-1) 16%, transparent), - color-mix(in srgb, var(--background-color-2) 16%, transparent) 50%); - box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px; + 220deg, + oklch(from var(--background-color-0) calc(l * 1.15) calc(c * 0.85) h / 0.15) 10%, + oklch(from var(--background-color-1) calc(l * 1.15) calc(c * 0.85) calc(h + 30) / 0.06) 70% + ), + linear-gradient( + 40deg, + oklch(from var(--background-color-1) calc(l * 1.15) calc(c * 0.85) calc(h - 30) / 0.15) 10%, + oklch(from var(--background-color-2) calc(l * 1.15) calc(c * 0.85) calc(h - 30) / 0.06) 70% + ); + box-shadow: oklch(0 0 0 / 0.25) 0px 0px 3px; } + +.album-carousel .labels:hover { + /* fancy hover */ + background-color: oklch(from var(--accent-bg-color) calc(l * 0.8) calc(c * 0.8) h / 0.3); + transition: 300ms; +} +/* TODO: hover effect for whole album, not just label */