diff options
Diffstat (limited to 'web/source/css')
| -rw-r--r-- | web/source/css/_media-wrapper.css | 176 | ||||
| -rw-r--r-- | web/source/css/_status-media.css | 7 | ||||
| -rw-r--r-- | web/source/css/profile-gallery.css | 19 |
3 files changed, 169 insertions, 33 deletions
diff --git a/web/source/css/_media-wrapper.css b/web/source/css/_media-wrapper.css index 1c2ae1503..a567cb0fd 100644 --- a/web/source/css/_media-wrapper.css +++ b/web/source/css/_media-wrapper.css @@ -42,13 +42,26 @@ height: 100%; width: 100%; + div.blurhash-container { + z-index: -1; + position: absolute; + height: 100%; + width: 100%; + } + + canvas { + height: 100%; + width: 100%; + object-fit: cover; + } + &[open] summary { height: auto; width: auto; margin: 1rem; padding: 0; - .show, video, img { + .show { display: none; } @@ -57,6 +70,10 @@ grid-column: 1 / span 3; grid-row: 1 / span 2; } + + div.blurhash-container > canvas { + display: none; + } } summary { @@ -65,7 +82,7 @@ width: 100%; z-index: 3; overflow: hidden; - + display: grid; padding: 1rem; grid-template-columns: 1fr auto 1fr; @@ -107,24 +124,15 @@ align-self: center; } } - - video, img { - z-index: -1; - position: absolute; - height: calc(100% + 1.2rem); - width: calc(100% + 1.2rem); - top: -0.6rem; - left: -0.6rem; - filter: blur(1.2rem); - } } video.plyr-video, .plyr { position: absolute; height: 100%; width: 100%; - object-fit: contain; + object-fit: cover; background: $gray1; + min-width: 100%; } .unknown-attachment { @@ -161,6 +169,86 @@ } } } + + @media screen and (max-width: 55rem) { + /* + Tablet-ish width, make "show sensitive" + and "eye" buttons smaller + more compact. + */ + & > details { + & > summary { + padding: 0.5rem; + + > div.show.sensitive.button { + font-size: smaller; + padding: 0.2rem; + line-height: 1.4rem; + } + + > span.eye.button { + font-size: smaller; + padding: 0 0.2rem 0 0.2rem; + + > .fa-fw { + line-height: 1.4rem; + } + } + } + + &[open] > summary { + margin: 0.5rem; + } + } + } + + @media screen and (max-width: 36rem) { + /* + Mobile-ish width, even more compact. + */ + & > details { + & > summary { + > div.show.sensitive.button { + font-size: small; + padding: 0.1rem; + line-height: 1.2rem; + } + + > span.eye.button { + font-size: small; + padding: 0 0.1rem 0 0.1rem; + + > .fa-fw { + line-height: 1.2rem; + } + } + } + } + } + + @media screen and (max-width: 27rem) { + /* + Really really tiny, make the text + on show/hide sensitive even smaller. + */ + & > details > summary > div.show.sensitive.button { + font-size: x-small; + } + } +} + +@media (scripting: none) { + .media-wrapper { + canvas.blurhash { + display: none + } + + & > details:not([open]) { + background: linear-gradient( + var(--bg-accent), + var(--bg) + ); + } + } } .pswp__button--open-post-link { @@ -187,21 +275,75 @@ position: initial; padding: 0.1rem; padding-top: 0.2rem; + gap: 0.15rem; + + .plyr__controls__item { + /* + Override margins from plyr as + we're displaying in flex with a gap. + */ + margin-left: 0; + margin-right: 0; + &:first-child { + margin-right: 0; + } + + /* + Try to split controls in at + least a somewhat sensible way. + */ + &.plyr__volume { + margin-left: auto; + } + &[data-plyr="restart"] { + margin-right: auto; + } + } + + /* + Override the rule from plyr that + hides the total duration on thinner + screens, we have enough room. + */ + .plyr__time + .plyr__time { + display: initial; + } } .plyr__control { box-shadow: none; } - .plyr__control--overlaid { - top: calc(50% - 18px); + .plyr__poster { + background-size: cover; + } + + /* + Hide plry controls when it's not inside + a lightbox, but use cursor pointer to + show the whole thing can be clicked. + */ + &.plyr--stopped, &.plyr--paused { + .plyr__controls { + display: none; + } + + cursor: pointer; } } .pswp__content { padding: 2rem; - .plyr { - max-height: 100%; + /* + Render plyr controls as normal + when it's inside a lightbox. + */ + .plyr__control--overlaid { + top: calc(50% - 18px); + } + > .plyr--stopped .plyr__controls, + > .plyr--paused .plyr__controls { + display: flex; } } diff --git a/web/source/css/_status-media.css b/web/source/css/_status-media.css index e8386c87a..761b969be 100644 --- a/web/source/css/_status-media.css +++ b/web/source/css/_status-media.css @@ -35,7 +35,12 @@ grid-row: span 2; } - @media screen and (max-width: 42rem) { + /* + On really skinny screens allow + media wrapper to take up full + width instead of showing 2 columns. + */ + @media screen and (max-width: 23rem) { .media-wrapper { grid-column: span 2; grid-row: span 2; diff --git a/web/source/css/profile-gallery.css b/web/source/css/profile-gallery.css index cb70eff22..ef18ed7b0 100644 --- a/web/source/css/profile-gallery.css +++ b/web/source/css/profile-gallery.css @@ -72,27 +72,16 @@ margin-top: 0.15rem; margin-bottom: 0.15rem; + /* Show 3 cols of media */ display: grid; - gap: 0.15rem; - - /* Desktop-ish width, show 3 cols of media */ grid-template-columns: repeat(3, 1fr); - - @media screen and (max-width: 55rem) { - /* Tablet-ish width, switch to 2 cols */ - grid-template-columns: repeat(2, 1fr); - } - - @media screen and (max-width: 36rem) { - /* Mobile-ish width, switch to 1 col */ - grid-template-columns: repeat(1, 1fr); - } + gap: 0.15rem; .media-wrapper { - aspect-ratio: 4/3; + aspect-ratio: 1; border: 0; border-radius: 0; - background: $bg; + background: $status-bg; } } |