Skip to content

Instantly share code, notes, and snippets.

@hakimel
Created September 13, 2024 08:46
Show Gist options
  • Save hakimel/853ced63f2709d434e458cb6d0ec64c4 to your computer and use it in GitHub Desktop.
Save hakimel/853ced63f2709d434e458cb6d0ec64c4 to your computer and use it in GitHub Desktop.
aside.controls {
--control-spacing: 0.8em;
--control-arrow-offset: -3.6em;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
aside.controls .navigate-left,
aside.controls .navigate-right,
aside.controls .navigate-up,
aside.controls .navigate-down {
bottom: auto;
right: auto;
}
aside.controls .navigate-left {
top: 50%;
left: var(--control-spacing);
margin-top: var(--control-arrow-size);
}
aside.controls .navigate-right {
top: 50%;
right: var(--control-spacing);
margin-top: var(--control-arrow-size);
}
aside.controls .navigate-up {
top: var(--control-spacing);
left: 50%;
margin-left: var(--control-arrow-size);
}
aside.controls .navigate-down {
bottom: calc(var(--control-spacing) - var(--control-spacing) + 0.3em);
left: 50%;
margin-left: var(--control-arrow-size);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment