102 lines
2.2 KiB
CSS
102 lines
2.2 KiB
CSS
:root {
|
|
--accent-bg-color: var(--accent-purple);
|
|
}
|
|
|
|
#grid {
|
|
padding: 6px 12px 12px;
|
|
}
|
|
|
|
#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 */
|
|
.controller-connected #grid > child:focus-within #cover,
|
|
#grid > child:focus-within:focus-visible #cover {
|
|
outline: 5px solid rgb(from var(--accent-color) r g b / 50%);
|
|
}
|
|
|
|
#game-item {
|
|
padding: 12px;
|
|
}
|
|
|
|
#game-item overlay > button,
|
|
#game-item overlay > menubutton > button {
|
|
color: white;
|
|
backdrop-filter: blur(9px) brightness(30%) saturate(600%);
|
|
box-shadow:
|
|
0 0 0 1px rgb(from currentcolor r g b / 10%) inset,
|
|
0 1px rgb(from currentcolor r g b / 30%) inset;
|
|
|
|
/* https://gitlab.gnome.org/GNOME/libadwaita/-/blob/c42b7c5bbff052a1af0eee131da28d1542254f47/src/stylesheet/_common.scss#L3 */
|
|
transition-property:
|
|
outline-color, outline-width, outline-offset, background, box-shadow,
|
|
opacity, transform;
|
|
}
|
|
|
|
#game-item overlay > button.hidden {
|
|
opacity: 0;
|
|
transform: translateY(3px);
|
|
}
|
|
|
|
#game-item overlay > menubutton.hidden > button {
|
|
opacity: 0;
|
|
transform: translateY(-6px);
|
|
}
|
|
|
|
#details {
|
|
--accent-fg-color: var(--view-bg-color);
|
|
--accent-bg-color: var(--view-fg-color);
|
|
--accent-color: oklab(
|
|
from var(--accent-bg-color) var(--standalone-color-oklab)
|
|
);
|
|
}
|
|
|
|
#details list {
|
|
background: rgb(from white r g b / 20%);
|
|
}
|
|
|
|
#background {
|
|
filter: saturate(300%) opacity(50%);
|
|
}
|
|
|
|
#collection-icon-child {
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
#details list {
|
|
background: rgb(from white r g b / 10%);
|
|
}
|
|
|
|
#background {
|
|
filter: saturate(300%) brightness(50%);
|
|
}
|
|
}
|
|
|
|
@media (prefers-contrast: more) {
|
|
.controller-connected #grid > child:focus-within #cover,
|
|
#grid > child:focus-within:focus-visible #cover {
|
|
outline: 5px solid var(--accent-color);
|
|
}
|
|
|
|
#game-item overlay > button,
|
|
#game-item overlay > menubutton > button {
|
|
backdrop-filter: blur(9px) brightness(20%) saturate(600%);
|
|
}
|
|
|
|
#background {
|
|
filter: saturate(300%) opacity(20%);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
#background {
|
|
filter: saturate(300%) brightness(25%);
|
|
}
|
|
}
|
|
}
|