diff --git a/cartridges/ui/cover.blp b/cartridges/ui/cover.blp index bbec5e3..1e6a225 100644 --- a/cartridges/ui/cover.blp +++ b/cartridges/ui/cover.blp @@ -14,6 +14,7 @@ template $Cover: Adw.Bin { tightening-threshold: bind _picture.width-request; child: Adw.ViewStack { + name: "cover"; visible-child-name: bind $_get_stack_child(template.paintable) as ; overflow: hidden; enable-transitions: true; diff --git a/cartridges/ui/style.css b/cartridges/ui/style.css index 0e187b0..d606149 100644 --- a/cartridges/ui/style.css +++ b/cartridges/ui/style.css @@ -7,8 +7,20 @@ } #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; - border-radius: 24px; } #game-item button { @@ -36,6 +48,10 @@ } @media (prefers-contrast: more) { + #grid > child:focus-within:focus-visible #cover { + outline: 5px solid var(--accent-color); + } + #game-item button { backdrop-filter: blur(9px) brightness(20%) saturate(600%); }