[Glitch] Add blurhash
Port front-end changes from fba96c808d
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
pull/1032/head
parent
1149ddd3da
commit
ccf4f3240a
|
@ -7,6 +7,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||||
import { isIOS } from 'flavours/glitch/util/is_mobile';
|
import { isIOS } from 'flavours/glitch/util/is_mobile';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { autoPlayGif, displayMedia } from 'flavours/glitch/util/initial_state';
|
import { autoPlayGif, displayMedia } from 'flavours/glitch/util/initial_state';
|
||||||
|
import { decode } from 'blurhash';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
hidden: {
|
hidden: {
|
||||||
|
@ -41,6 +42,7 @@ class Item extends React.PureComponent {
|
||||||
letterbox: PropTypes.bool,
|
letterbox: PropTypes.bool,
|
||||||
onClick: PropTypes.func.isRequired,
|
onClick: PropTypes.func.isRequired,
|
||||||
displayWidth: PropTypes.number,
|
displayWidth: PropTypes.number,
|
||||||
|
visible: PropTypes.bool.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
@ -49,6 +51,10 @@ class Item extends React.PureComponent {
|
||||||
size: 1,
|
size: 1,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
loaded: false,
|
||||||
|
};
|
||||||
|
|
||||||
handleMouseEnter = (e) => {
|
handleMouseEnter = (e) => {
|
||||||
if (this.hoverToPlay()) {
|
if (this.hoverToPlay()) {
|
||||||
e.target.play();
|
e.target.play();
|
||||||
|
@ -82,8 +88,40 @@ class Item extends React.PureComponent {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentDidMount () {
|
||||||
|
if (this.props.attachment.get('blurhash')) {
|
||||||
|
this._decode();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate (prevProps) {
|
||||||
|
if (prevProps.attachment.get('blurhash') !== this.props.attachment.get('blurhash') && this.props.attachment.get('blurhash')) {
|
||||||
|
this._decode();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_decode () {
|
||||||
|
const hash = this.props.attachment.get('blurhash');
|
||||||
|
const pixels = decode(hash, 32, 32);
|
||||||
|
|
||||||
|
if (pixels) {
|
||||||
|
const ctx = this.canvas.getContext('2d');
|
||||||
|
const imageData = new ImageData(pixels, 32, 32);
|
||||||
|
|
||||||
|
ctx.putImageData(imageData, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setCanvasRef = c => {
|
||||||
|
this.canvas = c;
|
||||||
|
}
|
||||||
|
|
||||||
|
handleImageLoad = () => {
|
||||||
|
this.setState({ loaded: true });
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { attachment, index, size, standalone, letterbox, displayWidth } = this.props;
|
const { attachment, index, size, standalone, letterbox, displayWidth, visible } = this.props;
|
||||||
|
|
||||||
let width = 50;
|
let width = 50;
|
||||||
let height = 100;
|
let height = 100;
|
||||||
|
@ -136,7 +174,15 @@ class Item extends React.PureComponent {
|
||||||
|
|
||||||
let thumbnail = '';
|
let thumbnail = '';
|
||||||
|
|
||||||
if (attachment.get('type') === 'image') {
|
if (attachment.get('type') === 'unknown') {
|
||||||
|
return (
|
||||||
|
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
|
||||||
|
<a className='media-gallery__item-thumbnail' href={attachment.get('remote_url')} target='_blank' style={{ cursor: 'pointer' }} >
|
||||||
|
<canvas width={32} height={32} ref={this.setCanvasRef} className='media-gallery__preview' />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else if (attachment.get('type') === 'image') {
|
||||||
const previewUrl = attachment.get('preview_url');
|
const previewUrl = attachment.get('preview_url');
|
||||||
const previewWidth = attachment.getIn(['meta', 'small', 'width']);
|
const previewWidth = attachment.getIn(['meta', 'small', 'width']);
|
||||||
|
|
||||||
|
@ -168,6 +214,7 @@ class Item extends React.PureComponent {
|
||||||
alt={attachment.get('description')}
|
alt={attachment.get('description')}
|
||||||
title={attachment.get('description')}
|
title={attachment.get('description')}
|
||||||
style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }}
|
style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }}
|
||||||
|
onLoad={this.handleImageLoad}
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
|
@ -197,7 +244,8 @@ class Item extends React.PureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames('media-gallery__item', { standalone, letterbox })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
|
<div className={classNames('media-gallery__item', { standalone, letterbox })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
|
||||||
{thumbnail}
|
<canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && this.state.loaded })} />
|
||||||
|
{visible && thumbnail}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -257,6 +305,7 @@ export default class MediaGallery extends React.PureComponent {
|
||||||
this.node = node;
|
this.node = node;
|
||||||
if (node && node.offsetWidth && node.offsetWidth != this.state.width) {
|
if (node && node.offsetWidth && node.offsetWidth != this.state.width) {
|
||||||
if (this.props.cacheWidth) this.props.cacheWidth(node.offsetWidth);
|
if (this.props.cacheWidth) this.props.cacheWidth(node.offsetWidth);
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
width: node.offsetWidth,
|
width: node.offsetWidth,
|
||||||
});
|
});
|
||||||
|
@ -275,7 +324,7 @@ export default class MediaGallery extends React.PureComponent {
|
||||||
|
|
||||||
const width = this.state.width || defaultWidth;
|
const width = this.state.width || defaultWidth;
|
||||||
|
|
||||||
let children;
|
let children, spoilerButton;
|
||||||
|
|
||||||
const style = {};
|
const style = {};
|
||||||
|
|
||||||
|
@ -289,40 +338,32 @@ export default class MediaGallery extends React.PureComponent {
|
||||||
return (<div className={computedClass} ref={this.handleRef}></div>);
|
return (<div className={computedClass} ref={this.handleRef}></div>);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!visible) {
|
if (this.isStandaloneEligible()) {
|
||||||
let warning = <FormattedMessage {...(sensitive ? messages.warning : messages.hidden)} />;
|
children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} visible={visible} />;
|
||||||
|
} else {
|
||||||
|
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} letterbox={letterbox} displayWidth={width} visible={visible} />);
|
||||||
|
}
|
||||||
|
|
||||||
children = (
|
if (visible) {
|
||||||
<button className='media-spoiler' type='button' onClick={this.handleOpen}>
|
spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />;
|
||||||
<span className='media-spoiler__warning'>{warning}</span>
|
} else {
|
||||||
<span className='media-spoiler__trigger'><FormattedMessage {...messages.toggle} /></span>
|
spoilerButton = (
|
||||||
|
<button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
|
||||||
|
<span className='spoiler-button__overlay__label'>{sensitive ? <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /> : <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />}</span>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
} else {
|
|
||||||
if (this.isStandaloneEligible()) {
|
|
||||||
children = <Item standalone attachment={media.get(0)} onClick={this.handleClick} displayWidth={width} />;
|
|
||||||
} else {
|
|
||||||
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} letterbox={letterbox} displayWidth={width} />);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={computedClass} style={style} ref={this.handleRef}>
|
<div className={computedClass} style={style} ref={this.handleRef}>
|
||||||
{visible ? (
|
<div className={classNames('spoiler-button', { 'spoiler-button--minified': visible })}>
|
||||||
<div className='sensitive-info'>
|
{spoilerButton}
|
||||||
<IconButton
|
{visible && sensitive && (
|
||||||
icon='eye'
|
|
||||||
onClick={this.handleOpen}
|
|
||||||
overlay
|
|
||||||
title={intl.formatMessage(messages.toggle_visible)}
|
|
||||||
/>
|
|
||||||
{sensitive ? (
|
|
||||||
<span className='sensitive-marker'>
|
<span className='sensitive-marker'>
|
||||||
<FormattedMessage {...messages.sensitive} />
|
<FormattedMessage {...messages.sensitive} />
|
||||||
</span>
|
</span>
|
||||||
) : null}
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
|
||||||
|
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -479,6 +479,7 @@ export default class Status extends ImmutablePureComponent {
|
||||||
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
|
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
|
||||||
{Component => (<Component
|
{Component => (<Component
|
||||||
preview={video.get('preview_url')}
|
preview={video.get('preview_url')}
|
||||||
|
blurhash={video.get('blurhash')}
|
||||||
src={video.get('url')}
|
src={video.get('url')}
|
||||||
alt={video.get('description')}
|
alt={video.get('description')}
|
||||||
inline
|
inline
|
||||||
|
|
|
@ -35,6 +35,7 @@ export default class StatusCheckBox extends React.PureComponent {
|
||||||
{Component => (
|
{Component => (
|
||||||
<Component
|
<Component
|
||||||
preview={video.get('preview_url')}
|
preview={video.get('preview_url')}
|
||||||
|
blurhash={video.get('blurhash')}
|
||||||
src={video.get('url')}
|
src={video.get('url')}
|
||||||
alt={video.get('description')}
|
alt={video.get('description')}
|
||||||
width={239}
|
width={239}
|
||||||
|
|
|
@ -134,6 +134,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
|
||||||
media = (
|
media = (
|
||||||
<Video
|
<Video
|
||||||
preview={video.get('preview_url')}
|
preview={video.get('preview_url')}
|
||||||
|
blurhash={video.get('blurhash')}
|
||||||
src={video.get('url')}
|
src={video.get('url')}
|
||||||
alt={video.get('description')}
|
alt={video.get('description')}
|
||||||
inline
|
inline
|
||||||
|
|
|
@ -123,6 +123,7 @@ export default class MediaModal extends ImmutablePureComponent {
|
||||||
return (
|
return (
|
||||||
<Video
|
<Video
|
||||||
preview={image.get('preview_url')}
|
preview={image.get('preview_url')}
|
||||||
|
blurhash={image.get('blurhash')}
|
||||||
src={image.get('url')}
|
src={image.get('url')}
|
||||||
width={image.get('width')}
|
width={image.get('width')}
|
||||||
height={image.get('height')}
|
height={image.get('height')}
|
||||||
|
|
|
@ -20,6 +20,7 @@ export default class VideoModal extends ImmutablePureComponent {
|
||||||
<div>
|
<div>
|
||||||
<Video
|
<Video
|
||||||
preview={media.get('preview_url')}
|
preview={media.get('preview_url')}
|
||||||
|
blurhash={media.get('blurhash')}
|
||||||
src={media.get('url')}
|
src={media.get('url')}
|
||||||
startTime={time}
|
startTime={time}
|
||||||
onCloseVideo={onClose}
|
onCloseVideo={onClose}
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { throttle } from 'lodash';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { isFullscreen, requestFullscreen, exitFullscreen } from 'flavours/glitch/util/fullscreen';
|
import { isFullscreen, requestFullscreen, exitFullscreen } from 'flavours/glitch/util/fullscreen';
|
||||||
import { displayMedia } from 'flavours/glitch/util/initial_state';
|
import { displayMedia } from 'flavours/glitch/util/initial_state';
|
||||||
|
import { decode } from 'blurhash';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
play: { id: 'video.play', defaultMessage: 'Play' },
|
play: { id: 'video.play', defaultMessage: 'Play' },
|
||||||
|
@ -104,6 +105,7 @@ export default class Video extends React.PureComponent {
|
||||||
preventPlayback: PropTypes.bool,
|
preventPlayback: PropTypes.bool,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
cacheWidth: PropTypes.func,
|
cacheWidth: PropTypes.func,
|
||||||
|
blurhash: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -147,6 +149,7 @@ export default class Video extends React.PureComponent {
|
||||||
|
|
||||||
setVideoRef = c => {
|
setVideoRef = c => {
|
||||||
this.video = c;
|
this.video = c;
|
||||||
|
|
||||||
if (this.video) {
|
if (this.video) {
|
||||||
this.setState({ volume: this.video.volume, muted: this.video.muted });
|
this.setState({ volume: this.video.volume, muted: this.video.muted });
|
||||||
}
|
}
|
||||||
|
@ -160,6 +163,10 @@ export default class Video extends React.PureComponent {
|
||||||
this.volume = c;
|
this.volume = c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setCanvasRef = c => {
|
||||||
|
this.canvas = c;
|
||||||
|
}
|
||||||
|
|
||||||
handleMouseDownRoot = e => {
|
handleMouseDownRoot = e => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
@ -181,7 +188,6 @@ export default class Video extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleVolumeMouseDown = e => {
|
handleVolumeMouseDown = e => {
|
||||||
|
|
||||||
document.addEventListener('mousemove', this.handleMouseVolSlide, true);
|
document.addEventListener('mousemove', this.handleMouseVolSlide, true);
|
||||||
document.addEventListener('mouseup', this.handleVolumeMouseUp, true);
|
document.addEventListener('mouseup', this.handleVolumeMouseUp, true);
|
||||||
document.addEventListener('touchmove', this.handleMouseVolSlide, true);
|
document.addEventListener('touchmove', this.handleMouseVolSlide, true);
|
||||||
|
@ -201,7 +207,6 @@ export default class Video extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleMouseVolSlide = throttle(e => {
|
handleMouseVolSlide = throttle(e => {
|
||||||
|
|
||||||
const rect = this.volume.getBoundingClientRect();
|
const rect = this.volume.getBoundingClientRect();
|
||||||
const x = (e.clientX - rect.left) / this.volWidth; //x position within the element.
|
const x = (e.clientX - rect.left) / this.volWidth; //x position within the element.
|
||||||
|
|
||||||
|
@ -272,6 +277,10 @@ export default class Video extends React.PureComponent {
|
||||||
document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange, true);
|
document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange, true);
|
||||||
document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true);
|
document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true);
|
||||||
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
|
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
|
||||||
|
|
||||||
|
if (this.props.blurhash) {
|
||||||
|
this._decode();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount () {
|
componentWillUnmount () {
|
||||||
|
@ -293,6 +302,24 @@ export default class Video extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentDidUpdate (prevProps) {
|
||||||
|
if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) {
|
||||||
|
this._decode();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_decode () {
|
||||||
|
const hash = this.props.blurhash;
|
||||||
|
const pixels = decode(hash, 32, 32);
|
||||||
|
|
||||||
|
if (pixels) {
|
||||||
|
const ctx = this.canvas.getContext('2d');
|
||||||
|
const imageData = new ImageData(pixels, 32, 32);
|
||||||
|
|
||||||
|
ctx.putImageData(imageData, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
handleFullscreenChange = () => {
|
handleFullscreenChange = () => {
|
||||||
this.setState({ fullscreen: isFullscreen() });
|
this.setState({ fullscreen: isFullscreen() });
|
||||||
}
|
}
|
||||||
|
@ -337,6 +364,7 @@ export default class Video extends React.PureComponent {
|
||||||
|
|
||||||
handleOpenVideo = () => {
|
handleOpenVideo = () => {
|
||||||
const { src, preview, width, height, alt } = this.props;
|
const { src, preview, width, height, alt } = this.props;
|
||||||
|
|
||||||
const media = fromJS({
|
const media = fromJS({
|
||||||
type: 'video',
|
type: 'video',
|
||||||
url: src,
|
url: src,
|
||||||
|
@ -385,6 +413,7 @@ export default class Video extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
let preload;
|
let preload;
|
||||||
|
|
||||||
if (startTime || fullscreen || dragging) {
|
if (startTime || fullscreen || dragging) {
|
||||||
preload = 'auto';
|
preload = 'auto';
|
||||||
} else if (detailed) {
|
} else if (detailed) {
|
||||||
|
@ -403,7 +432,9 @@ export default class Video extends React.PureComponent {
|
||||||
onMouseDown={this.handleMouseDownRoot}
|
onMouseDown={this.handleMouseDownRoot}
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
>
|
>
|
||||||
<video
|
<canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': revealed })} />
|
||||||
|
|
||||||
|
{revealed && <video
|
||||||
ref={this.setVideoRef}
|
ref={this.setVideoRef}
|
||||||
src={src}
|
src={src}
|
||||||
poster={preview}
|
poster={preview}
|
||||||
|
@ -423,12 +454,13 @@ export default class Video extends React.PureComponent {
|
||||||
onLoadedData={this.handleLoadedData}
|
onLoadedData={this.handleLoadedData}
|
||||||
onProgress={this.handleProgress}
|
onProgress={this.handleProgress}
|
||||||
onVolumeChange={this.handleVolumeChange}
|
onVolumeChange={this.handleVolumeChange}
|
||||||
/>
|
/>}
|
||||||
|
|
||||||
<button type='button' className={classNames('video-player__spoiler', { active: !revealed })} onClick={this.toggleReveal}>
|
<div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed })}>
|
||||||
<span className='video-player__spoiler__title'>{warning}</span>
|
<button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
|
||||||
<span className='video-player__spoiler__subtitle'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
|
<span className='spoiler-button__overlay__label'>{warning}</span>
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className={classNames('video-player__controls', { active: paused || hovered })}>
|
<div className={classNames('video-player__controls', { active: paused || hovered })}>
|
||||||
<div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>
|
<div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>
|
||||||
|
|
|
@ -1066,15 +1066,49 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.spoiler-button {
|
.spoiler-button {
|
||||||
display: none;
|
top: 0;
|
||||||
left: 4px;
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
|
|
||||||
top: 4px;
|
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
||||||
&.spoiler-button--visible {
|
&--minified {
|
||||||
display: block;
|
display: block;
|
||||||
|
left: 4px;
|
||||||
|
top: 4px;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__overlay {
|
||||||
|
display: block;
|
||||||
|
background: transparent;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
display: inline-block;
|
||||||
|
background: rgba($base-overlay-background, 0.5);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
color: $primary-text-color;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
.spoiler-button__overlay__label {
|
||||||
|
background: rgba($base-overlay-background, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -117,6 +117,8 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $secondary-text-color;
|
color: $secondary-text-color;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
&,
|
&,
|
||||||
img {
|
img {
|
||||||
|
@ -131,6 +133,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media-gallery__preview {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 0;
|
||||||
|
background: $base-overlay-background;
|
||||||
|
|
||||||
|
&--hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.media-gallery__gifv {
|
.media-gallery__gifv {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
@ -705,7 +705,7 @@
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
background: rgba($base-shadow-color, 0.6);
|
background: rgba($base-shadow-color, 0.6);
|
||||||
border-radius: 4px;
|
border-radius: 8px;
|
||||||
padding: 12px 9px;
|
padding: 12px 9px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -716,19 +716,18 @@
|
||||||
button,
|
button,
|
||||||
a {
|
a {
|
||||||
display: inline;
|
display: inline;
|
||||||
color: $primary-text-color;
|
color: $secondary-text-color;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 0 5px;
|
padding: 0 8px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
opacity: 0.6;
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
opacity: 1;
|
color: $primary-text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue