make everything worse for no reason

This commit is contained in:
psykose 2024-11-25 20:18:10 +01:00
parent 5694f93307
commit 265363db54
Signed by: psykose
SSH key fingerprint: SHA256:pRMVjV3kRB6zl+wNx+sV8KoMnPqQAW6v8dNCxsCGZv8
5 changed files with 94 additions and 46 deletions

4
Cargo.lock generated
View file

@ -1590,9 +1590,9 @@ dependencies = [
[[package]] [[package]]
name = "itoa" name = "itoa"
version = "1.0.13" version = "1.0.14"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "540654e97a3f4470a492cd30ff187bc95d89557a903a2bbf112e2fae98104ef2" checksum = "d75a2a4b1b190afb6f5425f10f6a8f959d2ea0b9c2b1d79553551850539e4674"
[[package]] [[package]]
name = "js-sys" name = "js-sys"

View file

@ -2,7 +2,9 @@ using Gtk 4.0;
using Adw 1; using Adw 1;
template $AudreyUiAlbumCarousel: Adw.Bin { template $AudreyUiAlbumCarousel: Adw.Bin {
styles [ "album-carousel" ] styles [
"album-carousel"
]
child: Box { child: Box {
orientation: vertical; orientation: vertical;
@ -14,13 +16,20 @@ template $AudreyUiAlbumCarousel: Adw.Bin {
Label { Label {
label: bind template.title; label: bind template.title;
styles [ "title-2" ]
styles [
"title-2"
]
} }
Button { Button {
valign: center; valign: center;
icon-name: "view-refresh-symbolic"; icon-name: "view-refresh-symbolic";
styles [ "circular", "flat" ]
styles [
"circular",
"flat"
]
} }
Box { Box {
@ -30,17 +39,27 @@ template $AudreyUiAlbumCarousel: Adw.Bin {
Button { Button {
icon-name: "go-previous-symbolic"; icon-name: "go-previous-symbolic";
styles [ "flat" ]
styles [
"flat"
]
} }
Button { Button {
icon-name: "go-next-symbolic"; icon-name: "go-next-symbolic";
styles [ "flat" ]
styles [
"flat"
]
} }
} }
} }
Separator { styles [ "spacer" ] } Separator {
styles [
"spacer"
]
}
ScrolledWindow { ScrolledWindow {
hexpand: true; hexpand: true;
@ -63,6 +82,10 @@ template $AudreyUiAlbumCarousel: Adw.Bin {
factory: BuilderListItemFactory { factory: BuilderListItemFactory {
template ListItem { template ListItem {
child: Box { child: Box {
styles [
"album"
]
orientation: vertical; orientation: vertical;
margin-bottom: 6; margin-bottom: 6;
spacing: 6; spacing: 6;
@ -75,7 +98,10 @@ template $AudreyUiAlbumCarousel: Adw.Bin {
} }
Box { Box {
styles [ "labels" ] styles [
"labels"
]
orientation: vertical; orientation: vertical;
homogeneous: true; homogeneous: true;

View file

@ -33,15 +33,19 @@ template $AudreyUiPlayQueue: Adw.Bin {
[overlay] [overlay]
ProgressBar pulse_bar { ProgressBar pulse_bar {
styles [ "osd" ] styles [
"osd"
]
valign: start; valign: start;
} }
child: Picture { child: Picture {
styles [ "playing-cover-art" ] styles [
"playing-cover-art"
]
valign: center; valign: center;
halign: center; halign: center;
paintable: bind template.playing-cover-art; paintable: bind template.playing-cover-art;
}; };

View file

@ -158,7 +158,10 @@ template $AudreyUiPlaybar: Adw.Bin {
[end] [end]
Box end { Box end {
Separator { Separator {
styles ["spacer"] styles [
"spacer"
]
hexpand: true; hexpand: true;
} }
@ -196,5 +199,9 @@ template $AudreyUiPlaybar: Adw.Bin {
// make sure the middle is centered always // make sure the middle is centered always
SizeGroup { SizeGroup {
mode: horizontal; mode: horizontal;
widgets [start, end]
widgets [
start,
end
]
} }

View file

@ -2,20 +2,23 @@ toolbarview#main {
/* from amberol */ /* from amberol */
background: background:
linear-gradient( linear-gradient(
127deg, 111deg,
color-mix(in srgb, var(--background-color-0) 55%, transparent), oklch(from var(--background-color-0) l c h / 0.55),
color-mix(in srgb, var(--background-color-0) 0%, transparent) 70.71%), oklch(from var(--background-color-0) l c h / 0) 65%
),
linear-gradient( linear-gradient(
217deg, 222deg,
color-mix(in srgb, var(--background-color-1) 55%, transparent), oklch(from var(--background-color-1) l c h / 0.55),
color-mix(in srgb, var(--background-color-1) 0%, transparent) 70.71%), oklch(from var(--background-color-1) l c h / 0) 65%
),
linear-gradient( linear-gradient(
336deg, 333deg,
color-mix(in srgb, var(--background-color-2) 55%, transparent), oklch(from var(--background-color-2) l c h / 0.55),
color-mix(in srgb, var(--background-color-2) 0%, transparent) 70.71%); oklch(from var(--background-color-2) l c h / 0) 65%
);
transition-property: background; transition-property: background;
transition-duration: 250ms; transition-duration: 450ms;
transition-timing-function: ease; transition-timing-function: cubic-bezier(0.13, 0.6, 0.8, 0.5);
} }
#seek-scale slider { #seek-scale slider {
@ -25,15 +28,6 @@ toolbarview#main {
min-height: 10px; 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 { #seek-scale trough highlight {
background-color: var(--background-color-0); background-color: var(--background-color-0);
} }
@ -49,7 +43,7 @@ toolbarview#main {
} }
#play-queue listview { #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 */ /* make drag and drop indicator take up entire perimeter */
@ -58,7 +52,7 @@ toolbarview#main {
} }
#play-queue .playing { #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 { #play-queue .playing label.title {
@ -66,7 +60,7 @@ toolbarview#main {
} }
gridview.albums { gridview.albums {
background-color: rgba(0,0,0,0); background-color: oklch(0 0 0 / 0);
} }
gridview.albums child { gridview.albums child {
@ -79,7 +73,7 @@ gridview.albums child image {
#play-queue-page picture.playing-cover-art { #play-queue-page picture.playing-cover-art {
border-radius: 10px; 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 { .loading-cover picture.playing-cover-art {
@ -89,7 +83,7 @@ gridview.albums child image {
/* album carousel */ /* album carousel */
.album-carousel listview { .album-carousel listview {
background-color: rgba(0,0,0,0); background-color: oklch(0 0 0 / 0);
} }
.album-carousel listview row { .album-carousel listview row {
@ -99,15 +93,32 @@ gridview.albums child image {
.album-carousel listview row image { .album-carousel listview row image {
border-radius: 3px; border-radius: 3px;
background-color: #000; background-color: oklch(0 0 0);
} }
.album-carousel .labels { .album-carousel .labels {
border-radius: 3px; border-radius: 3px;
}
#seek-scale trough, .album-carousel .labels {
/* sort of adjusted rotation of the toolbarview idk */
background: background:
linear-gradient( linear-gradient(
150deg, 220deg,
color-mix(in srgb, var(--background-color-1) 16%, transparent), oklch(from var(--background-color-0) calc(l * 1.15) calc(c * 0.85) h / 0.15) 10%,
color-mix(in srgb, var(--background-color-2) 16%, transparent) 50%); oklch(from var(--background-color-1) calc(l * 1.15) calc(c * 0.85) calc(h + 30) / 0.06) 70%
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px; ),
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 */