skullbite/cartridges
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Improve grid item hover and focus styling

Browse Source
This commit is contained in:
kramo
2025-12-01 23:29:24 +01:00
parent 094bd6a928
commit ec87a49acb
2 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
cartridges/ui/cover.blp
View File

@@ -14,6 +14,7 @@ template $Cover: Adw.Bin {
tightening-threshold: bind _picture.width-request; tightening-threshold: bind _picture.width-request;
child: Adw.ViewStack { child: Adw.ViewStack {
name: "cover";
visible-child-name: bind $_get_stack_child(template.paintable) as <string>; visible-child-name: bind $_get_stack_child(template.paintable) as <string>;
overflow: hidden; overflow: hidden;
enable-transitions: true; enable-transitions: true;

18
cartridges/ui/style.css
View File

@@ -7,8 +7,20 @@
} }
#grid > child { #grid > child {
padding: 0;
border-radius: 0;
background: none;
outline: none;
box-shadow: none;
}
/* https://gitlab.gnome.org/World/highscore/-/blob/cea3c7492d0b3c78a8b79ca60e9a86e8cdd4ceaf/src/library/library.css#L86 */
#grid > child:focus-within:focus-visible #cover {
outline: 5px solid rgb(from var(--accent-color) r g b / 50%);
}
#game-item {
padding: 12px; padding: 12px;
border-radius: 24px;
} }
#game-item button { #game-item button {
@@ -36,6 +48,10 @@
} }
@media (prefers-contrast: more) { @media (prefers-contrast: more) {
#grid > child:focus-within:focus-visible #cover {
outline: 5px solid var(--accent-color);
}
#game-item button { #game-item button {
backdrop-filter: blur(9px) brightness(20%) saturate(600%); backdrop-filter: blur(9px) brightness(20%) saturate(600%);
} }