make everything worse for no reason
This commit is contained in:
parent
5694f93307
commit
265363db54
5 changed files with 94 additions and 46 deletions
4
Cargo.lock
generated
4
Cargo.lock
generated
|
@ -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"
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
|
@ -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
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
Loading…
Reference in a new issue