zerica/audrey
1
1
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

make everything worse for no reason

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Cargo.lock generated
View file

@ -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"

40
resources/album_carousel.blp
View file

@ -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 {
valign: center;
icon-name: "view-refresh-symbolic";
styles [ "circular", "flat" ]
styles [
"circular",
"flat"
]
}
Box {
@ -30,17 +39,27 @@ template $AudreyUiAlbumCarousel: Adw.Bin {
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;

10
resources/play_queue.blp
View file

@ -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;
};

11
resources/playbar.blp
View file

@ -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
]
}

71
resources/style.css
View file

@ -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 */