diff options
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 20 |
1 files changed, 20 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css index f908a05..c581535 100644 --- a/src/style.css +++ b/src/style.css @@ -1546,6 +1546,26 @@ body::after { } .mp-sound { font-size: 15px; } .mp-sound .off { display: none; } +/* A mouse's way through the pager: arrows, where there is a pointer to + hover with (a phone swipes). Faint until the pointer is over the pager; + the sideways pair only when the post has a picture that way. */ +.mp-arrows { display: none; } +@media (hover: hover) and (pointer: fine) { + .mp-arrows { display: contents; } + .mp-arrow { + position: absolute; z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; + display: flex; align-items: center; justify-content: center; cursor: pointer; + color: #fff; background: rgba(255, 255, 255, .14); opacity: .4; transition: opacity .15s, background .15s; + } + .mp-arrow svg { width: 26px; height: 26px; } + .media-pager:hover .mp-arrow { opacity: .8; } + .mp-arrow:hover { opacity: 1; background: rgba(255, 255, 255, .28); } + .mp-up { right: 14px; top: calc(50% - 50px); } + .mp-down { right: 14px; top: calc(50% + 6px); } + .mp-ar-left { left: 14px; top: calc(50% - 22px); } + .mp-ar-right { right: 72px; top: calc(50% - 22px); } + .media-pager:not(.has-left) .mp-ar-left, .media-pager:not(.has-right) .mp-ar-right { display: none; } +} .media-pager.quiet .mp-sound .on { display: none; } .media-pager.quiet .mp-sound .off { display: inline; } /* muted against our will: the button stays up so the way to sound is plain */ |