diff options
Diffstat (limited to 'app/javascript/flavours')
19 files changed, 1847 insertions, 599 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/video_modal.js b/app/javascript/flavours/glitch/features/ui/components/video_modal.js index 22fa998fb..4412fd0f7 100644 --- a/app/javascript/flavours/glitch/features/ui/components/video_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/video_modal.js @@ -23,6 +23,7 @@ export default class VideoModal extends ImmutablePureComponent { src={media.get('url')} startTime={time} onCloseVideo={onClose} + detailed description={media.get('description')} /> </div> diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index 97c1c27fa..7c75b271a 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -17,6 +17,17 @@ const messages = defineMessages({ exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' }, }); +const formatTime = secondsNum => { + let hours = Math.floor(secondsNum / 3600); + let minutes = Math.floor((secondsNum - (hours * 3600)) / 60); + let seconds = secondsNum - (hours * 3600) - (minutes * 60); + + if (hours < 10) hours = '0' + hours; + if (minutes < 10) minutes = '0' + minutes; + if (seconds < 10) seconds = '0' + seconds; + return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`; +}; + const findElementPosition = el => { let box; @@ -85,11 +96,13 @@ export default class Video extends React.PureComponent { onCloseVideo: PropTypes.func, letterbox: PropTypes.bool, fullwidth: PropTypes.bool, + detailed: PropTypes.bool, intl: PropTypes.object.isRequired, }; state = { - progress: 0, + currentTime: 0, + duration: 0, paused: true, dragging: false, fullscreen: false, @@ -119,7 +132,10 @@ export default class Video extends React.PureComponent { } handleTimeUpdate = () => { - this.setState({ progress: 100 * (this.video.currentTime / this.video.duration) }); + this.setState({ + currentTime: Math.floor(this.video.currentTime), + duration: Math.floor(this.video.duration), + }); } handleMouseDown = e => { @@ -145,8 +161,10 @@ export default class Video extends React.PureComponent { handleMouseMove = throttle(e => { const { x } = getPointerPosition(this.seek, e); - this.video.currentTime = this.video.duration * x; - this.setState({ progress: x * 100 }); + const currentTime = Math.floor(this.video.duration * x); + + this.video.currentTime = currentTime; + this.setState({ currentTime }); }, 60); togglePlay = () => { @@ -228,11 +246,12 @@ export default class Video extends React.PureComponent { } render () { - const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth } = this.props; - const { progress, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; + const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed } = this.props; + const { currentTime, duration, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; + const progress = (currentTime / duration) * 100; return ( - <div className={classNames('video-player', { inactive: !revealed, inline: !fullscreen, fullscreen, letterbox, 'full-width': fullwidth })} ref={this.setPlayerRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> + <div className={classNames('video-player', { inactive: !revealed, detailed, inline: width && height && !fullscreen, fullscreen, letterbox, 'full-width': fullwidth })} style={{ width, height }} ref={this.setPlayerRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> <video ref={this.setVideoRef} src={src} @@ -269,20 +288,30 @@ export default class Video extends React.PureComponent { /> </div> - <div className='video-player__buttons left'> - <button aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><i className={classNames('fa fa-fw', { 'fa-play': paused, 'fa-pause': !paused })} /></button> - <button aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button> - {!onCloseVideo && <button aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fa fa-fw fa-eye' /></button>} - </div> - - <div className='video-player__buttons right'> - {(!fullscreen && onOpenVideo) && <button aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><i className='fa fa-fw fa-expand' /></button>} - {onCloseVideo && <button aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><i className='fa fa-fw fa-times' /></button>} - <button aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><i className={classNames('fa fa-fw', { 'fa-arrows-alt': !fullscreen, 'fa-compress': fullscreen })} /></button> + <div className='video-player__buttons-bar'> + <div className='video-player__buttons left'> + <button aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><i className={classNames('fa fa-fw', { 'fa-play': paused, 'fa-pause': !paused })} /></button> + <button aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button> + + {!onCloseVideo && <button aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fa fa-fw fa-eye' /></button>} + + {(detailed || fullscreen) && + <span> + <span className='video-player__time-current'>{formatTime(currentTime)}</span> + <span className='video-player__time-sep'>/</span> + <span className='video-player__time-total'>{formatTime(duration)}</span> + </span> + } + </div> + + <div className='video-player__buttons right'> + {(!fullscreen && onOpenVideo) && <button aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><i className='fa fa-fw fa-expand' /></button>} + {onCloseVideo && <button aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><i className='fa fa-fw fa-compress' /></button>} + <button aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><i className={classNames('fa fa-fw', { 'fa-arrows-alt': !fullscreen, 'fa-compress': fullscreen })} /></button> + </div> </div> </div> </div> ); } - } diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 4ec689427..31c079cc5 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -19,7 +19,7 @@ display: inline; margin: 0; padding: 0; - font-weight: 500; + font-weight: 700; background: transparent; font-family: inherit; font-size: inherit; @@ -424,14 +424,19 @@ text-align: center; .avatar { - @include avatar-size(80px); + width: 80px; + height: 80px; margin: 0 auto; margin-bottom: 15px; + @include avatar-size(80px); img { + display: block; + width: 80px; + height: 80px; + border-radius: 48px; @include avatar-radius(); @include avatar-size(80px); - display: block; } } diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index 2cf98c642..497ee9ba6 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -68,7 +68,7 @@ font-weight: 500; position: relative; z-index: 2; - margin-bottom: 30px; + margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; @@ -83,16 +83,20 @@ } .avatar { - @include avatar-size(120px); + width: 120px; margin: 0 auto; position: relative; z-index: 2; + @include avatar-size(120px); img { - @include avatar-radius(); - @include avatar-size(120px); + width: 120px; + height: 120px; display: block; + border-radius: 120px; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + @include avatar-radius(); + @include avatar-size(120px); } } @@ -123,7 +127,7 @@ } .roles { - margin-bottom: 30px; + margin-bottom: 15px; padding: 0 15px; } @@ -203,53 +207,10 @@ font-size: 14px; line-height: 18px; padding: 0 15px; + text-align: center; color: $ui-secondary-color; } - .metadata { - $meta-table-border: darken($classic-highlight-color, 20%);//#174f77; - - border-collapse: collapse; - padding: 0; - margin: 15px -15px -10px -15px; - border: 0 none; - border-top: 1px solid $meta-table-border; - border-bottom: 1px solid $meta-table-border; - - td, th { - padding: 10px; - border: 0 none; - border-bottom: 1px solid $meta-table-border; - vertical-align: middle; - } - - tr:last-child { - td, th { - border-bottom: 0 none; - } - } - - td { - color: $ui-primary-color; - width:100%; // makes it stretch - padding-left: 0; - } - - th { - padding-left: 15px; - font-weight: bold; - text-align: left; - width: 94px; - color: $ui-secondary-color; - background: darken($ui-base-color, 8%); - //background: #131415; - } - - a { - color: $classic-highlight-color; - } - } - @media screen and (max-width: 480px) { display: block; @@ -260,7 +221,7 @@ .name, .roles { text-align: center; - margin-bottom: 15px; + margin-bottom: 5px; } .bio { @@ -407,14 +368,19 @@ } .avatar { + width: 80px; + height: 80px; @include avatar-size(80px); img { display: block; - @include avatar-radius(); - @include avatar-size(80px); + width: 80px; + height: 80px; + border-radius: 80px; border: 2px solid $simple-background-color; background: $simple-background-color; + @include avatar-radius(); + @include avatar-size(80px); } } @@ -492,14 +458,17 @@ } & > div { - @include avatar-size(48px); float: left; margin-right: 10px; + width: 48px; + height: 48px; + @include avatar-size(48px); } .avatar { - @include avatar-radius(); display: block; + border-radius: 4px; + @include avatar-radius(); } .display-name { @@ -513,6 +482,12 @@ strong { font-weight: 500; color: $ui-base-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } span { @@ -587,3 +562,5 @@ border-color: rgba(lighten($error-red, 12%), 0.5); } } + +@import 'metadata'; diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index bdfa50814..f9245e134 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -121,6 +121,12 @@ strong { color: $primary-text-color; font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } } @@ -222,6 +228,12 @@ font-weight: 500; text-transform: uppercase; font-size: 12px; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } a { @@ -281,6 +293,12 @@ font-size: 14px; line-height: 18px; color: $ui-secondary-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } .account-card { diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index 52d9ed105..7112400f4 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -1,4 +1,6 @@ -.composer { padding: 10px } +.composer { + padding: 10px; +} .composer--spoiler { input { @@ -102,6 +104,17 @@ } } +.emoji-picker-dropdown { + position: absolute; + right: 5px; + top: 5px; + + ::-webkit-scrollbar-track:hover, + ::-webkit-scrollbar-track:active { + background-color: rgba($base-overlay-background, 0.3); + } +} + .composer--textarea { position: relative; diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index 2b46d30fc..4161cc045 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -95,6 +95,11 @@ padding: 0 6px 6px; background: $simple-background-color; will-change: transform; + + &::-webkit-scrollbar-track:hover, + &::-webkit-scrollbar-track:active { + background-color: rgba($base-overlay-background, 0.3); + } } .emoji-mart-search { diff --git a/app/javascript/flavours/glitch/styles/components/glitch.scss b/app/javascript/flavours/glitch/styles/components/glitch.scss new file mode 100644 index 000000000..cad93821e --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/glitch.scss @@ -0,0 +1,656 @@ +.status__content { + //reset + overflow: initial; + padding-top: inherit; + //glitch + position: relative; + margin: 10px 0; + padding: 0 12px; + font-size: 15px; + line-height: 20px; + color: $primary-text-color; + word-wrap: break-word; + font-weight: 400; + overflow: visible; + white-space: pre-wrap; + padding-top: 5px; +} + +.status-check-box { + .status__content { + color: #3a3a3a; + a { + color: #005aa9; + } + } +} + +.status__content__spoiler { + background: lighten($ui-base-color, 30%); + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } +} + +.status__content__text { + display: none; + + &.status__content__spoiler--visible { + display: block; + } +} + +.status__content__spoiler-link { + //reset + background: initial; + border: initial; + padding: initial; + //glitch + background: lighten($ui-base-color, 30%); + border: none; + padding: 0 5px; + vertical-align: bottom; + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } + + .status__content__spoiler-icon { + display: inline-block; + margin: 0 0 0 5px; + border-left: 1px solid currentColor; + padding: 0 0 0 4px; + font-size: 16px; + vertical-align: -2px; + } +} + +.status__prepend-icon-wrapper { + //reset + left: initial; + position: initial; + //glitch + float: left; + margin: 0 10px 0 -58px; + width: 48px; + text-align: right; +} + +.notif-cleaning { + .status, .notification-follow { + padding-right: ($dismiss-overlay-width + 0.5rem); + } +} + +.notification-follow { + position: relative; + + // same like Status + border-bottom: 1px solid lighten($ui-base-color, 8%); + + .account { + border-bottom: 0 none; + } +} + +.status { + //reset + padding-left: initial; + //glitch + padding: 8px 10px; + position: relative; + height: auto; + min-height: 48px; + border-bottom: 1px solid lighten($ui-base-color, 8%); + cursor: default; + + &.collapsed { + background-position: center; + background-size: cover; + user-select: none; + + &.has-background::before { + display: block; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); + content: ""; + } + + .display-name:hover .display-name__html { + text-decoration: none; + } + + .status__content { + height: 20px; + overflow: hidden; + text-overflow: ellipsis; + + a:hover { + text-decoration: none; + } + } + } + + .notification__message { + margin: -10px -10px 10px; + } +} + +.status__relative-time { + //reset + float: initial; + //glitch + display: inline-block; + margin-left: auto; + padding-left: 18px; + width: 120px; + color: $ui-base-lighter-color; + font-size: 14px; + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.status__display-name { + margin: 0 auto 0 0; + color: $ui-base-lighter-color; + overflow: hidden; +} + +.status__info { + display: flex; + margin: 2px 0 5px; + font-size: 15px; + line-height: 24px; +} + +.status__info__icons { + flex: none; + position: relative; + color: lighten($ui-base-color, 26%); + + .status__visibility-icon { + padding-left: 6px; + } +} + +.status__prepend { + //reset + margin-left: initial; + padding: initial; + padding-bottom: initial; + //glitch + margin: -10px -10px 10px; + color: $ui-base-lighter-color; + padding: 8px 10px 0 68px; + font-size: 14px; + position: relative; +} + +.account { + color: inherit; + text-decoration: none; + + &.small { + border: none; + padding: 0; + + & > .account__avatar-wrapper { margin: 0 8px 0 0 } + + & > .display-name { + height: 24px; + line-height: 24px; + } + } +} + +.account__avatar-wrapper { + //reset + margin-left: initial; + margin-right: initial; + //glitch + margin: 6px 16px 6px 6px; +} + +.account__header__wrapper { + flex: 0 0 auto; + background: lighten($ui-base-color, 4%); +} + +.account__header { + .account__avatar { + @include avatar-radius(); + @include avatar-size(90px); + display: block; + margin: 0 auto 10px; + overflow: hidden; + } +} + +.status__avatar { + //reset + left: initial; + position: initial; + top: initial; + //glitch + flex: none; + margin: 0 10px 0 0; + height: 48px; + width: 48px; +} + +.display-name { + display: block; + padding: 6px 0; + max-width: 100%; + height: 36px; + overflow: hidden; + + strong { + display: block; + height: 18px; + font-size: 16px; + font-weight: 500; + line-height: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + span { + display: block; + height: 18px; + font-size: 15px; + line-height: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + &:hover { + strong { + text-decoration: underline; + } + } + + &.inline { + padding: 0; + height: 18px; + font-size: 15px; + line-height: 18px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + strong { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + + span { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + } +} + +.column { + width: 330px; + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: hidden; + + .wide & { + flex: auto; + min-width: 330px; + max-width: 400px; + } + + > .scrollable { + background: $ui-base-color; + } +} + +.column-header__button { + // glitch - added focus ring for keyboard navigation + &:focus { + text-shadow: 0 0 4px darken($ui-highlight-color, 5%); + } +} + +.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { + border-top: 1px solid $ui-base-color; +} + +.notification__dismiss-overlay { + overflow: hidden; + position: absolute; + top: 0; + right: 0; + bottom: -1px; + padding-left: 15px; // space for the box shadow to be visible + + z-index: 999; + align-items: center; + justify-content: flex-end; + cursor: pointer; + + display: flex; + + .wrappy { + width: $dismiss-overlay-width; + align-self: stretch; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: lighten($ui-base-color, 8%); + border-left: 1px solid lighten($ui-base-color, 20%); + box-shadow: 0 0 5px black; + border-bottom: 1px solid $ui-base-color; + } + + .ckbox { + border: 2px solid $ui-primary-color; + border-radius: 2px; + width: 30px; + height: 30px; + font-size: 20px; + color: $ui-primary-color; + text-shadow: 0 0 5px black; + display: flex; + justify-content: center; + align-items: center; + } + + &:focus { + outline: 0 !important; + + .ckbox { + box-shadow: 0 0 1px 1px $ui-highlight-color; + } + } +} + +.column-header__notif-cleaning-buttons { + display: flex; + align-items: stretch; + justify-content: space-around; + + button { + @extend .column-header__button; + background: transparent; + text-align: center; + padding: 10px 0; + white-space: pre-wrap; + } + + b { + font-weight: bold; + } +} + +// The notifs drawer with no padding to have more space for the buttons +.column-header__collapsible-inner.nopad-drawer { + padding: 0; +} + +.column-header__collapsible { + // notif cleaning drawer + &.ncd { + transition: none; + &.collapsed { + max-height: 0; + opacity: 0.7; + } + } +} + +.media-spoiler { + .status__content > & { + margin-top: 15px; // Add margin when used bare for NSFW video player + } + @include fullwidth-gallery; +} + +.sensitive-info { + display: flex; + flex-direction: row; + align-items: center; + position: absolute; + top: 4px; + left: 4px; + z-index: 100; +} + +.sensitive-marker { + margin: 0 3px; + border-radius: 2px; + padding: 2px 6px; + color: rgba($primary-text-color, 0.8); + background: rgba($base-overlay-background, 0.5); + font-size: 12px; + line-height: 15px; + text-transform: uppercase; + opacity: .9; + transition: opacity .1s ease; + + .media-gallery:hover & { opacity: 1 } +} + +.boost-modal, +.favourite-modal, +.confirmation-modal, +.report-modal, +.actions-modal, +.mute-modal { + background: lighten($ui-secondary-color, 8%); + color: $ui-base-color; + border-radius: 8px; + overflow: hidden; + max-width: 90vw; + width: 480px; + position: relative; + flex-direction: column; + + .status__display-name { + //reset + display: initial; + max-width: initial; + padding-right: initial; + //glitch + display: flex; + } +} + +.boost-modal__container, +.favourite-modal__container { + overflow-x: scroll; + padding: 10px; + + .status { + user-select: text; + border-bottom: 0; + } +} + +.boost-modal__action-bar, +.favourite-modal__action-bar, +.confirmation-modal__action-bar, +.mute-modal__action-bar, +.report-modal__action-bar { + display: flex; + justify-content: space-between; + background: $ui-secondary-color; + padding: 10px; + line-height: 36px; + + & > div { + flex: 1 1 auto; + text-align: right; + color: lighten($ui-base-color, 33%); + padding-right: 10px; + } + + .button { + flex: 0 0 auto; + } +} + +.boost-modal__status-header, +.favourite-modal__status-header { + font-size: 15px; +} + +.boost-modal__status-time, +.favourite-modal__status-time { + float: right; + font-size: 14px; +} + +.actions-modal { + strong { + display: block; + font-weight: 500; + } +} + +.media-gallery { + box-sizing: border-box; + margin-top: 8px; + overflow: hidden; + position: relative; + background: $base-shadow-color; + width: 100%; + + .detailed-status & { + margin-left: -12px; + width: calc(100% + 24px); + height: 250px; + } + + @include fullwidth-gallery; +} + +.media-gallery__item-thumbnail { + cursor: zoom-in; + display: block; + text-decoration: none; + height: 100%; + line-height: 0; + + &, + img { + //reset + height: initial; + object-fit: initial; + //glitch + width: 100%; + object-fit: contain; + + &:not(.letterbox) { + height: 100%; + object-fit: cover; + } + } +} + +.media-gallery__gifv { + display: flex; + justify-content: center; +} + +.media-gallery__item-gifv-thumbnail { + //reset + object-fit: initial; + top: initial; + transform: initial; + width: initial; + z-index: initial; + //glitch + cursor: zoom-in; + height: 100%; + width: 100%; + position: relative; + z-index: 1; + object-fit: contain; + + &:not(.letterbox) { + height: 100%; + object-fit: cover; + } +} + +.status__video-player { + //reset + background: initial; + //glitch + display: flex; + align-items: center; + background: $base-shadow-color; + box-sizing: border-box; + cursor: default; /* May not be needed */ + margin-top: 8px; + overflow: hidden; + position: relative; + + @include fullwidth-gallery; +} + +.status__video-player-video { + position: relative; + width: 100%; + z-index: 1; + + &:not(.letterbox) { + height: 100%; + object-fit: cover; + } +} + +.video-player { + //reset + border-radius: initial; + //glitch + .detailed-status & { + margin-left: -12px; + width: calc(100% + 24px); + height: 250px; + } + + @include fullwidth-gallery; + + video { + object-fit: cover; + position: relative; + } +} + +.media-spoiler-video { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + margin-top: 8px; + position: relative; + width: 100%; + + @include fullwidth-gallery; + + border: 0; + display: block; +} diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index ca6fd9e99..d35dd7e07 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -264,22 +264,287 @@ color: $ui-base-color; } -.follow-form__input { - background: $simple-background-color; +.compose-form { + padding: 10px; - &:disabled { + .compose-form__warning { + color: darken($ui-secondary-color, 65%); + margin-bottom: 15px; + background: $ui-primary-color; + box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); + padding: 8px 10px; + border-radius: 4px; + font-size: 13px; + font-weight: 400; + + strong { + color: darken($ui-secondary-color, 65%); + font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } + + a { + color: darken($ui-primary-color, 33%); + font-weight: 500; + text-decoration: underline; + + &:hover, + &:active, + &:focus { + text-decoration: none; + } + } + } + + .compose-form__autosuggest-wrapper { + position: relative; + + .emoji-picker-dropdown { + position: absolute; + right: 5px; + top: 5px; + } + } + + .autosuggest-textarea, + .spoiler-input { + position: relative; + } + + .autosuggest-textarea__textarea, + .spoiler-input__input { + display: block; + box-sizing: border-box; + width: 100%; + margin: 0; + color: $ui-base-color; + background: $simple-background-color; + padding: 10px; + font-family: inherit; + font-size: 14px; + resize: vertical; + border: 0; + outline: 0; + + &:focus { + outline: 0; + } + + @media screen and (max-width: 600px) { + font-size: 16px; + } + } + + .spoiler-input__input { + border-radius: 4px; + } + + .autosuggest-textarea__textarea { + min-height: 100px; + border-radius: 4px 4px 0 0; + padding-bottom: 0; + padding-right: 10px + 22px; + resize: none; + + @media screen and (max-width: 600px) { + height: 100px !important; // prevent auto-resize textarea + resize: vertical; + } + } + + .autosuggest-textarea__suggestions { + box-sizing: border-box; + display: none; + position: absolute; + top: 100%; + width: 100%; + z-index: 99; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); background: $ui-secondary-color; + border-radius: 0 0 4px 4px; + color: $ui-base-color; + font-size: 14px; + padding: 6px; + + &.autosuggest-textarea__suggestions--visible { + display: block; + } } -} -.emoji-picker-dropdown { - position: absolute; - right: 5px; - top: 5px; + .autosuggest-textarea__suggestions__item { + padding: 10px; + cursor: pointer; + border-radius: 4px; + + &:hover, + &:focus, + &:active, + &.selected { + background: darken($ui-secondary-color, 10%); + } + } + + .autosuggest-account, + .autosuggest-emoji { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + line-height: 18px; + font-size: 14px; + } + + .autosuggest-account-icon, + .autosuggest-emoji img { + display: block; + margin-right: 8px; + width: 16px; + height: 16px; + } + + .autosuggest-account .display-name__account { + color: lighten($ui-base-color, 36%); + } + + .compose-form__modifiers { + color: $ui-base-color; + font-family: inherit; + font-size: 14px; + background: $simple-background-color; + + .compose-form__upload-wrapper { + overflow: hidden; + } + + .compose-form__uploads-wrapper { + display: flex; + flex-direction: row; + padding: 5px; + flex-wrap: wrap; + } + + .compose-form__upload { + flex: 1 1 0; + min-width: 40%; + margin: 5px; + + &-description { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + right: 0; + box-sizing: border-box; + background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + padding: 10px; + opacity: 0; + transition: opacity .1s ease; + + input { + background: transparent; + color: $ui-secondary-color; + border: 0; + padding: 0; + margin: 0; + width: 100%; + font-family: inherit; + font-size: 14px; + font-weight: 500; + + &:focus { + color: $white; + } + + &::placeholder { + opacity: 0.54; + color: $ui-secondary-color; + } + } + + &.active { + opacity: 1; + } + } + + .icon-button { + mix-blend-mode: difference; + } + } + + .compose-form__upload-thumbnail { + border-radius: 4px; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + height: 100px; + width: 100%; + } + } + + .compose-form__buttons-wrapper { + padding: 10px; + background: darken($simple-background-color, 8%); + border-radius: 0 0 4px 4px; + display: flex; + justify-content: space-between; + + .compose-form__buttons { + display: flex; + + .compose-form__upload-button-icon { + line-height: 27px; + } + + .compose-form__sensitive-button { + display: none; + + &.compose-form__sensitive-button--visible { + display: block; + } + + .compose-form__sensitive-button__icon { + line-height: 27px; + } + } + } + + .icon-button { + box-sizing: content-box; + padding: 0 3px; + } + + .character-counter__wrapper { + align-self: center; + margin-right: 4px; - ::-webkit-scrollbar-track:hover, - ::-webkit-scrollbar-track:active { - background-color: rgba($base-overlay-background, 0.3); + .character-counter { + cursor: default; + font-family: 'mastodon-font-sans-serif', sans-serif; + font-size: 14px; + font-weight: 600; + color: lighten($ui-base-color, 12%); + + &.character-counter--over { + color: $warning-red; + } + } + } + } + + .compose-form__publish { + display: flex; + justify-content: flex-end; + min-width: 0; + + .compose-form__publish-button-wrapper { + overflow: hidden; + padding-top: 10px; + } } } @@ -297,31 +562,52 @@ } } -.status__content--with-action { - cursor: pointer; +.reply-indicator { + border-radius: 4px 4px 0 0; + position: relative; + bottom: -2px; + background: $ui-primary-color; + padding: 10px; } -.status-check-box { - .status__content { - color: #3a3a3a; - a { - color: #005aa9; - } - } +.reply-indicator__header { + margin-bottom: 5px; + overflow: hidden; } -.status__content { - position: relative; - margin: 10px 0; - padding: 0 12px; +.reply-indicator__cancel { + float: right; + line-height: 24px; +} + +.reply-indicator__display-name { + color: $ui-base-color; + display: block; + max-width: 100%; + line-height: 24px; + overflow: hidden; + padding-right: 25px; + text-decoration: none; +} + +.reply-indicator__display-avatar { + float: left; + margin-right: 5px; +} + +.status__content--with-action { + cursor: pointer; +} + +.status__content, +.reply-indicator__content { font-size: 15px; line-height: 20px; - color: $primary-text-color; word-wrap: break-word; font-weight: 400; - overflow: visible; + overflow: hidden; white-space: pre-wrap; - padding-top: 5px; + padding-top: 2px; &:focus { outline: 0; @@ -338,7 +624,7 @@ .emojione { width: 20px; height: 20px; - margin: -5px 0 0; + margin: -3px 0 0; } p { @@ -376,10 +662,19 @@ } } - .status__content__spoiler { + .status__content__spoiler-link { + background: lighten($ui-base-color, 30%); + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } + } + + .status__content__text { display: none; - &.status__content__spoiler--visible { + &.status__content__text--visible { display: block; } } @@ -388,54 +683,20 @@ .status__content__spoiler-link { display: inline-block; border-radius: 2px; - background: lighten($ui-base-color, 30%); - border: none; + background: transparent; + border: 0; color: lighten($ui-base-color, 8%); font-weight: 500; font-size: 11px; - padding: 0 5px; + padding: 0 6px; text-transform: uppercase; line-height: inherit; cursor: pointer; - vertical-align: bottom; - - &:hover { - background: lighten($ui-base-color, 33%); - text-decoration: none; - } - - .status__content__spoiler-icon { - display: inline-block; - margin: 0 0 0 5px; - border-left: 1px solid currentColor; - padding: 0 0 0 4px; - font-size: 16px; - vertical-align: -2px; - } } .status__prepend-icon-wrapper { - float: left; - margin: 0 10px 0 -58px; - width: 48px; - text-align: right; -} - -.notif-cleaning { - .status, .notification-follow { - padding-right: ($dismiss-overlay-width + 0.5rem); - } -} - -.notification-follow { - position: relative; - - // same like Status - border-bottom: 1px solid lighten($ui-base-color, 8%); - - .account { - border-bottom: 0 none; - } + left: -26px; + position: absolute; } .focusable { @@ -460,8 +721,8 @@ .status { padding: 8px 10px; + padding-left: 68px; position: relative; - height: auto; min-height: 48px; border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: default; @@ -528,41 +789,6 @@ } } } - - &.collapsed { - background-position: center; - background-size: cover; - user-select: none; - - &.has-background::before { - display: block; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); - content: ""; - } - - .display-name:hover .display-name__html { - text-decoration: none; - } - - .status__content { - height: 20px; - overflow: hidden; - text-overflow: ellipsis; - - a:hover { - text-decoration: none; - } - } - } - - .notification__message { - margin: -10px -10px 10px; - } } .notification-favourite { @@ -576,39 +802,23 @@ } .status__relative-time { - display: inline-block; - margin-left: auto; - padding-left: 18px; - width: 120px; color: $ui-base-lighter-color; + float: right; font-size: 14px; - text-align: right; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } .status__display-name { - margin: 0 auto 0 0; color: $ui-base-lighter-color; - overflow: hidden; } -.status__info { - display: flex; - margin: 2px 0 5px; - font-size: 15px; - line-height: 24px; +.status__info .status__display-name { + display: block; + max-width: 100%; + padding-right: 25px; } -.status__info__icons { - flex: none; - position: relative; - color: lighten($ui-base-color, 26%); - - .status__visibility-icon { - padding-left: 6px; - } +.status__info { + font-size: 15px; } .status-check-box { @@ -633,9 +843,10 @@ } .status__prepend { - margin: -10px -10px 10px; + margin-left: 68px; color: $ui-base-lighter-color; - padding: 8px 10px 0 68px; + padding: 8px 0; + padding-bottom: 2px; font-size: 14px; position: relative; @@ -653,36 +864,18 @@ .status__action-bar { align-items: center; display: flex; - margin: 10px 4px 0; + margin-top: 8px; } .status__action-bar-button { float: left; margin-right: 18px; - flex: 0 0 auto; } .status__action-bar-dropdown { float: left; height: 23.15px; width: 23.15px; - - // Dropdown style override for centering on the icon - .dropdown--active { - position: relative; - - .dropdown__content.dropdown__right { - left: calc(50% + 3px); - right: initial; - transform: translate(-50%, 0); - top: 22px; - } - - &::after { - right: 1px; - bottom: -2px; - } - } } .detailed-status__action-bar-dropdown { @@ -704,7 +897,7 @@ .emojione { width: 24px; height: 24px; - margin: -5px 0 0; + margin: -1px 0 0; } } @@ -742,11 +935,18 @@ margin-left: 6px; } +.reply-indicator__content { + color: $ui-base-color; + font-size: 14px; + + a { + color: lighten($ui-base-color, 20%); + } +} + .account { padding: 10px; border-bottom: 1px solid lighten($ui-base-color, 8%); - color: inherit; - text-decoration: none; .account__display-name { flex: 1 1 auto; @@ -756,18 +956,6 @@ text-decoration: none; font-size: 14px; } - - &.small { - border: none; - padding: 0; - - & > .account__avatar-wrapper { margin: 0 8px 0 0 } - - & > .display-name { - height: 24px; - line-height: 24px; - } - } } .account__wrapper { @@ -776,7 +964,8 @@ .account__avatar-wrapper { float: left; - margin: 6px 16px 6px 6px; + margin-left: 12px; + margin-right: 12px; } .account__avatar { @@ -792,7 +981,6 @@ } .account__avatar-overlay { - position: relative; @include avatar-size(48px); &-base { @@ -813,21 +1001,30 @@ .account__relationship { height: 18px; - padding: 12px 10px; + padding: 10px; white-space: nowrap; } -.account__header__wrapper { +.account__header { flex: 0 0 auto; background: lighten($ui-base-color, 4%); -} - -.account__header { text-align: center; background-size: cover; background-position: center; position: relative; + &.inactive { + opacity: 0.5; + + .account__header__avatar { + filter: grayscale(100%); + } + + .account__header__username { + color: $ui-primary-color; + } + } + & > div { background: rgba(lighten($ui-base-color, 4%), 0.9); padding: 20px 10px; @@ -837,14 +1034,6 @@ color: $ui-secondary-color; } - .account__avatar { - @include avatar-radius(); - @include avatar-size(90px); - display: block; - margin: 0 auto 10px; - overflow: hidden; - } - .account__header__display-name { color: $primary-text-color; display: inline-block; @@ -874,6 +1063,12 @@ strong { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } a { @@ -922,59 +1117,6 @@ } } -.account__metadata { - width: 100%; - font-size: 15px; - line-height: 20px; - overflow: hidden; - border-collapse: collapse; - - a { - text-decoration: none; - - &:hover{ - text-decoration: underline; - } - } - - tr { - border-top: 1px solid lighten($ui-base-color, 8%); - } - - th, td { - padding: 14px 20px; - vertical-align: middle; - - & > div { - max-height: 40px; - overflow-y: auto; - white-space: pre-wrap; - text-overflow: ellipsis; - } - } - - th { - color: $ui-primary-color; - background: lighten($ui-base-color, 13%); - font-variant: small-caps; - max-width: 120px; - - a { - color: $primary-text-color; - } - } - - td { - flex: auto; - color: $primary-text-color; - background: $ui-base-color; - - a { - color: $ui-highlight-color; - } - } -} - .account__action-bar { border-top: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%); @@ -1028,6 +1170,12 @@ font-size: 15px; font-weight: 500; color: $primary-text-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } abbr { @@ -1081,6 +1229,15 @@ } } +.status__display-name, +.reply-indicator__display-name, +.detailed-status__display-name, +.account__display-name { + &:hover strong { + text-decoration: underline; + } +} + .account__display-name strong { display: block; overflow: hidden; @@ -1118,9 +1275,10 @@ } .status__avatar { - flex: none; - margin: 0 10px 0 0; height: 48px; + left: 10px; + position: absolute; + top: 10px; width: 48px; } @@ -1134,7 +1292,7 @@ color: $ui-base-lighter-color; } - .status__avatar, .emojione { + .status__avatar { opacity: 0.5; } @@ -1150,7 +1308,9 @@ } .notification__message { - padding: 8px 10px 0 68px; + margin-left: 68px; + padding: 8px 0; + padding-bottom: 0; cursor: default; color: $ui-primary-color; font-size: 15px; @@ -1168,10 +1328,8 @@ } .notification__favourite-icon-wrapper { - float: left; - margin: 0 10px 0 -58px; - width: 48px; - text-align: right; + left: -26px; + position: absolute; .star-icon { color: $gold-star; @@ -1195,61 +1353,18 @@ .display-name { display: block; - padding: 6px 0; max-width: 100%; - height: 36px; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} - strong { - display: block; - height: 18px; - font-size: 16px; - font-weight: 500; - line-height: 18px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - span { - display: block; - height: 18px; - font-size: 15px; - line-height: 18px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - &:hover { - strong { - text-decoration: underline; - } - } - - &.inline { - padding: 0; - height: 18px; - font-size: 15px; - line-height: 18px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - - strong { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } +.display-name__html { + font-weight: 500; +} - span { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } - } +.display-name__account { + font-size: 14px; } .status__relative-time, @@ -1293,6 +1408,45 @@ } } +.navigation-bar { + padding: 10px; + display: flex; + flex-shrink: 0; + cursor: default; + color: $ui-primary-color; + + strong { + color: $primary-text-color; + } + + .permalink { + text-decoration: none; + } + + .icon-button { + pointer-events: none; + opacity: 0; + } +} + +.navigation-bar__profile { + flex: 1 1 auto; + margin-left: 8px; + overflow: hidden; +} + +.navigation-bar__profile-account { + display: block; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; +} + +.navigation-bar__profile-edit { + color: inherit; + text-decoration: none; +} + .dropdown { display: inline-block; } @@ -1459,12 +1613,11 @@ justify-content: flex-start; overflow-x: auto; position: relative; - padding: 10px; } @include limited-single-column('screen and (max-width: 360px)', $parent: null) { .columns-area { - padding: 0; + padding: 10px; } .react-swipeable-view-container .columns-area { @@ -1475,6 +1628,7 @@ .react-swipeable-view-container { &, .columns-area, + .drawer, .column { height: 100%; } @@ -1493,13 +1647,6 @@ box-sizing: border-box; display: flex; flex-direction: column; - overflow: hidden; - - .wide & { - flex: auto; - min-width: 330px; - max-width: 400px; - } > .scrollable { background: $ui-base-color; @@ -1515,6 +1662,25 @@ background: darken($ui-base-color, 7%); } +.drawer { + width: 300px; + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow-y: hidden; +} + +.drawer__tab { + display: block; + flex: 1 1 auto; + padding: 15px 5px 13px; + color: $ui-primary-color; + text-decoration: none; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; +} + .column { overflow: hidden; } @@ -1538,6 +1704,11 @@ .columns-area { flex-direction: column; } + + .search__input, + .autosuggest-textarea__textarea { + font-size: 16px; + } } } @@ -1547,6 +1718,7 @@ } .column { + flex: 0 0 auto; padding: 10px; padding-left: 5px; padding-right: 5px; @@ -1607,13 +1779,29 @@ text-align: left; } +.drawer__header { + flex: 0 0 auto; + font-size: 16px; + background: lighten($ui-base-color, 8%); + margin-bottom: 10px; + display: flex; + flex-direction: row; + + a { + transition: background 100ms ease-in; + + &:hover { + background: lighten($ui-base-color, 3%); + transition: background 200ms ease-out; + } + } +} + .tabs-bar { display: flex; background: lighten($ui-base-color, 8%); flex: 0 0 auto; overflow-y: auto; - margin: 10px; - margin-bottom: 0; } .tabs-bar__link { @@ -1858,8 +2046,6 @@ font-size: 16px; padding: 15px; text-decoration: none; - cursor: pointer; - outline: none; &:hover { background: lighten($ui-base-color, 11%); @@ -1891,14 +2077,8 @@ overflow-y: auto; } -.getting-started__footer { - display: flex; - flex-direction: column; -} - .getting-started { - box-sizing: border-box; - padding-bottom: 235px; + background: $ui-base-color; flex: 1 0 auto; p { @@ -2023,15 +2203,12 @@ } .status-card-photo { + cursor: zoom-in; display: block; text-decoration: none; - - img { - display: block; width: 100%; height: auto; margin: 0; - } } .status-card-video { @@ -2082,14 +2259,19 @@ .status-card__image-image { border-radius: 4px 4px 0 0; } + + .status-card__title { + white-space: inherit; + } } .status-card__image-image { border-radius: 4px 0 0 4px; display: block; - height: auto; margin: 0; width: 100%; + height: 100%; + object-fit: cover; } .load-more { @@ -2209,88 +2391,6 @@ background: lighten($ui-base-color, 8%); } } - - // glitch - added focus ring for keyboard navigation - &:focus { - text-shadow: 0 0 4px darken($ui-highlight-color, 5%); - } -} - -.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { - border-top: 1px solid $ui-base-color; -} - -.notification__dismiss-overlay { - overflow: hidden; - position: absolute; - top: 0; - right: 0; - bottom: -1px; - padding-left: 15px; // space for the box shadow to be visible - - z-index: 999; - align-items: center; - justify-content: flex-end; - cursor: pointer; - - display: flex; - - .wrappy { - width: $dismiss-overlay-width; - align-self: stretch; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background: lighten($ui-base-color, 8%); - border-left: 1px solid lighten($ui-base-color, 20%); - box-shadow: 0 0 5px black; - border-bottom: 1px solid $ui-base-color; - } - - .ckbox { - border: 2px solid $ui-primary-color; - border-radius: 2px; - width: 30px; - height: 30px; - font-size: 20px; - color: $ui-primary-color; - text-shadow: 0 0 5px black; - display: flex; - justify-content: center; - align-items: center; - } - - &:focus { - outline: 0 !important; - - .ckbox { - box-shadow: 0 0 1px 1px $ui-highlight-color; - } - } -} - -.column-header__notif-cleaning-buttons { - display: flex; - align-items: stretch; - justify-content: space-around; - - button { - @extend .column-header__button; - background: transparent; - text-align: center; - padding: 10px 0; - white-space: pre-wrap; - } - - b { - font-weight: bold; - } -} - -// The notifs drawer with no padding to have more space for the buttons -.column-header__collapsible-inner.nopad-drawer { - padding: 0; } .column-header__collapsible { @@ -2317,15 +2417,6 @@ border-top: 1px solid lighten($ui-base-color, 12%); margin: 10px 0; } - - // notif cleaning drawer - &.ncd { - transition: none; - &.collapsed { - max-height: 0; - opacity: 0.7; - } - } } .column-header__collapsible-inner { @@ -2466,19 +2557,12 @@ border: 0; width: 100%; height: 100%; - justify-content: center; - position: relative; - text-align: center; - z-index: 100; - display: flex; - flex-direction: column; - align-items: stretch; - .status__content > & { - margin-top: 15px; // Add margin when used bare for NSFW video player + &:hover, + &:active, + &:focus { + color: lighten($ui-primary-color, 8%); } - - @include fullwidth-gallery; } .media-spoiler__warning { @@ -2492,29 +2576,17 @@ font-weight: 500; } -.sensitive-info { - display: flex; - flex-direction: row; - align-items: center; +.spoiler-button { + display: none; + left: 4px; position: absolute; + text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; top: 4px; - left: 4px; z-index: 100; -} -.sensitive-marker { - margin: 0 3px; - border-radius: 2px; - padding: 2px 6px; - color: rgba($primary-text-color, 0.8); - background: rgba($base-overlay-background, 0.5); - font-size: 12px; - line-height: 15px; - text-transform: uppercase; - opacity: .9; - transition: opacity .1s ease; - - .media-gallery:hover & { opacity: 1 } + &.spoiler-button--visible { + display: block; + } } .modal-container--preloader { @@ -2792,6 +2864,47 @@ border-radius: 4px; } +.upload-progress { + padding: 10px; + color: $ui-base-lighter-color; + overflow: hidden; + display: flex; + + .fa { + font-size: 34px; + margin-right: 10px; + } + + span { + font-size: 12px; + text-transform: uppercase; + font-weight: 500; + display: block; + } +} + +.upload-progess__message { + flex: 1 1 auto; +} + +.upload-progress__backdrop { + width: 100%; + height: 6px; + border-radius: 6px; + background: $ui-base-lighter-color; + position: relative; + margin-top: 5px; +} + +.upload-progress__tracker { + position: absolute; + left: 0; + top: 0; + height: 6px; + background: $ui-highlight-color; + border-radius: 6px; +} + .emoji-button { display: block; font-size: 24px; @@ -2831,6 +2944,90 @@ filter: none; } +.privacy-dropdown__dropdown { + position: absolute; + background: $simple-background-color; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + border-radius: 4px; + margin-left: 40px; + overflow: hidden; + transform-origin: 50% 0; +} + +.privacy-dropdown__option { + color: $ui-base-color; + padding: 10px; + cursor: pointer; + display: flex; + + &:hover, + &.active { + background: $ui-highlight-color; + color: $primary-text-color; + + .privacy-dropdown__option__content { + color: $primary-text-color; + + strong { + color: $primary-text-color; + } + } + } + + &.active:hover { + background: lighten($ui-highlight-color, 4%); + } +} + +.privacy-dropdown__option__icon { + display: flex; + align-items: center; + justify-content: center; + margin-right: 10px; +} + +.privacy-dropdown__option__content { + flex: 1 1 auto; + color: darken($ui-primary-color, 24%); + + strong { + font-weight: 500; + display: block; + color: $ui-base-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } +} + +.privacy-dropdown.active { + .privacy-dropdown__value { + background: $simple-background-color; + border-radius: 4px 4px 0 0; + box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); + + .icon-button { + transition: none; + } + + &.active { + background: $ui-highlight-color; + + .icon-button { + color: $primary-text-color; + } + } + } + + .privacy-dropdown__dropdown { + display: block; + box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); + } +} + .search { position: relative; } @@ -3237,6 +3434,12 @@ border-radius: 4px; font-size: 14px; padding: 3px 6px; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } } } @@ -3371,7 +3574,6 @@ } .boost-modal, -.favourite-modal, .confirmation-modal, .report-modal, .actions-modal, @@ -3386,7 +3588,17 @@ flex-direction: column; .status__display-name { - display: flex; + display: block; + max-width: 100%; + padding-right: 25px; + } + + .status__avatar { + height: 28px; + left: 10px; + position: absolute; + top: 10px; + width: 48px; } } @@ -3403,8 +3615,7 @@ } } -.boost-modal__container, -.favourite-modal__container{ +.boost-modal__container { overflow-x: scroll; padding: 10px; @@ -3415,7 +3626,6 @@ } .boost-modal__action-bar, -.favourite-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, .report-modal__action-bar { @@ -3437,13 +3647,11 @@ } } -.boost-modal__status-header, -.favourite-modal__status-header { +.boost-modal__status-header { font-size: 15px; } -.boost-modal__status-time, -.favourite-modal__status-time { +.boost-modal__status-time { float: right; font-size: 14px; } @@ -3491,8 +3699,7 @@ max-height: 80vh; max-width: 80vw; - strong { - display: block; + .actions-modal__item-label { font-weight: 500; } @@ -3505,25 +3712,33 @@ } li:not(:empty) { - & > .link { + a { color: $ui-base-color; display: flex; padding: 12px 16px; font-size: 15px; align-items: center; text-decoration: none; - transition: none; + + &, + button { + transition: none; + } &.active, &:hover, &:active, &:focus { + &, + button { background: $ui-highlight-color; color: $primary-text-color; + } } & > .react-toggle, - & > .icon { + & > .icon, + button:first-child { margin-right: 10px; } } @@ -3557,6 +3772,12 @@ strong { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } } @@ -3652,20 +3873,10 @@ /* Media Gallery */ .media-gallery { box-sizing: border-box; - margin-top: 15px; + margin-top: 8px; overflow: hidden; position: relative; - background: $base-shadow-color; width: 100%; - height: 110px; - - .detailed-status & { - margin-left: -12px; - width: calc(100% + 24px); - height: 250px; - } - - @include fullwidth-gallery; } .media-gallery__item { @@ -3684,20 +3895,16 @@ .media-gallery__item-thumbnail { cursor: zoom-in; + display: block; text-decoration: none; - width: 100%; height: 100%; line-height: 0; - display: flex; + &, img { width: 100%; - object-fit: contain; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } + height: 100%; + object-fit: cover; } } @@ -3706,21 +3913,17 @@ overflow: hidden; position: relative; width: 100%; - display: flex; - justify-content: center; } .media-gallery__item-gifv-thumbnail { cursor: zoom-in; height: 100%; + object-fit: cover; position: relative; + top: 50%; + transform: translateY(-50%); + width: 100%; z-index: 1; - object-fit: contain; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } } .media-gallery__item-thumbnail-label { @@ -3733,28 +3936,22 @@ /* Status Video Player */ .status__video-player { - display: flex; - align-items: center; - background: $base-shadow-color; + background: $base-overlay-background; box-sizing: border-box; cursor: default; /* May not be needed */ - margin-top: 15px; + margin-top: 8px; overflow: hidden; position: relative; - width: 100%; - - @include fullwidth-gallery; } .status__video-player-video { + height: 100%; + object-fit: cover; position: relative; + top: 50%; + transform: translateY(-50%); width: 100%; z-index: 1; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } } .status__video-player-expand, @@ -3794,17 +3991,8 @@ overflow: hidden; position: relative; background: $base-shadow-color; - width: 100%; max-width: 100%; - height: 110px; - - .detailed-status & { - margin-left: -12px; - width: calc(100% + 24px); - height: 250px; - } - - @include fullwidth-gallery; + border-radius: 4px; video { height: 100%; @@ -3839,8 +4027,8 @@ left: 0; right: 0; box-sizing: border-box; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 60%, transparent); - padding: 0 10px; + background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent); + padding: 0 15px; opacity: 0; transition: opacity .1s ease; @@ -3893,40 +4081,67 @@ } } - &__buttons { + &__buttons-bar { + display: flex; + justify-content: space-between; padding-bottom: 10px; + } + + &__buttons { font-size: 16px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; &.left { - float: left; - button { - padding-right: 10px; + padding-left: 0; } } &.right { - float: right; - button { - padding-left: 10px; + padding-right: 0; } } button { background: transparent; - padding: 0; + padding: 2px 10px; + font-size: 16px; border: 0; - color: $white; + color: rgba($white, 0.75); &:active, &:hover, &:focus { - color: $ui-highlight-color; + color: $white; } } } + &__time-sep, + &__time-total, + &__time-current { + font-size: 14px; + font-weight: 500; + } + + &__time-current { + color: $white; + margin-left: 10px; + } + + &__time-sep { + display: inline-block; + margin: 0 6px; + } + + &__time-sep, + &__time-total { + color: $white; + } + &__seek { cursor: pointer; height: 24px; @@ -3936,6 +4151,7 @@ content: ""; width: 100%; background: rgba($white, 0.35); + border-radius: 4px; display: block; position: absolute; height: 4px; @@ -3947,8 +4163,9 @@ display: block; position: absolute; height: 4px; + border-radius: 4px; top: 10px; - background: $ui-highlight-color; + background: lighten($ui-highlight-color, 8%); } &__buffer { @@ -3965,7 +4182,8 @@ top: 6px; margin-left: -6px; transition: opacity .1s ease; - background: $ui-highlight-color; + background: lighten($ui-highlight-color, 8%); + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); pointer-events: none; &.active { @@ -3979,6 +4197,16 @@ } } } + +&.detailed, +&.fullscreen { + .video-player__buttons { + button { + padding-top: 10px; + padding-bottom: 10px; + } + } +} } .media-spoiler-video { @@ -3986,12 +4214,8 @@ background-repeat: no-repeat; background-position: center; cursor: pointer; - margin-top: 15px; + margin-top: 8px; position: relative; - width: 100%; - - @include fullwidth-gallery; - border: 0; display: block; } @@ -4074,6 +4298,37 @@ border-radius: 0; } +.search-popout { + background: $simple-background-color; + border-radius: 4px; + padding: 10px 14px; + padding-bottom: 14px; + margin-top: 10px; + color: $ui-primary-color; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + + h4 { + text-transform: uppercase; + color: $ui-primary-color; + font-size: 13px; + font-weight: 500; + margin-bottom: 10px; + } + + li { + padding: 4px 0; + } + + ul { + margin-bottom: 10px; + } + + em { + font-weight: 500; + color: $ui-base-color; + } +} + noscript { text-align: center; @@ -4192,6 +4447,42 @@ noscript { } } +.account__moved-note { + padding: 14px 10px; + padding-bottom: 16px; + background: lighten($ui-base-color, 4%); + border-top: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); + + &__message { + position: relative; + margin-left: 58px; + color: $ui-base-lighter-color; + padding: 8px 0; + padding-top: 0; + padding-bottom: 4px; + font-size: 14px; + + > span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + } + } + + &__icon-wrapper { + left: -26px; + position: absolute; + } + + .detailed-status__display-avatar { + position: relative; + } + + .detailed-status__display-name { + margin-bottom: 0; + } +} .column-inline-form { padding: 7px 15px; @@ -4284,6 +4575,8 @@ noscript { } } +@import 'glitch'; +@import 'metadata'; @import 'composer'; @import 'doodle'; @import 'drawer'; diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss new file mode 100644 index 000000000..d56de19ea --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/metadata.scss @@ -0,0 +1,52 @@ +.account__metadata { + width: 100%; + font-size: 15px; + line-height: 20px; + overflow: hidden; + border-collapse: collapse; + + a { + text-decoration: none; + + &:hover{ + text-decoration: underline; + } + } + + tr { + border-top: 1px solid lighten($ui-base-color, 8%); + text-align: center; + } + + th, td { + padding: 14px 20px; + vertical-align: middle; + + & > div { + max-height: 40px; + overflow-y: auto; + white-space: pre-wrap; + text-overflow: ellipsis; + } + } + + th { + color: $ui-primary-color; + background: lighten($ui-base-color, 13%); + max-width: 120px; + + a { + color: $primary-text-color; + } + } + + td { + flex: auto; + color: $primary-text-color; + background: $ui-base-color; + + a { + color: $ui-highlight-color; + } + } +} diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 61fcf286f..2bef53cff 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -56,6 +56,12 @@ code { strong { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } .label_input { @@ -395,6 +401,12 @@ code { strong { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } @media screen and (max-width: 740px) and (min-width: 441px) { @@ -430,6 +442,12 @@ code { strong { color: $ui-secondary-color; font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } @media screen and (max-width: 740px) and (min-width: 441px) { @@ -474,6 +492,12 @@ code { strong { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } } } @@ -506,6 +530,12 @@ code { display: block; margin-bottom: 5px; + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + .fa { font-weight: 400; } diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss index a5169f881..a8ce12953 100644 --- a/app/javascript/flavours/glitch/styles/index.scss +++ b/app/javascript/flavours/glitch/styles/index.scss @@ -8,6 +8,7 @@ @import 'basics'; @import 'containers'; @import 'lists'; +@import 'modal'; @import 'footer'; @import 'compact_header'; @import 'landing_strip'; diff --git a/app/javascript/flavours/glitch/styles/landing_strip.scss b/app/javascript/flavours/glitch/styles/landing_strip.scss index 0bf9daafd..ffa1e149d 100644 --- a/app/javascript/flavours/glitch/styles/landing_strip.scss +++ b/app/javascript/flavours/glitch/styles/landing_strip.scss @@ -12,6 +12,12 @@ strong, a { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } a { @@ -34,3 +40,72 @@ .memoriam-strip { background: rgba($base-shadow-color, 0.7); } + +.moved-strip { + padding: 14px; + border-radius: 4px; + background: rgba(darken($ui-base-color, 7%), 0.8); + color: $ui-secondary-color; + font-weight: 400; + margin-bottom: 20px; + + strong, + a { + font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } + + a { + color: inherit; + text-decoration: underline; + + &.mention { + text-decoration: none; + + span { + text-decoration: none; + } + + &:focus, + &:hover, + &:active { + text-decoration: none; + + span { + text-decoration: underline; + } + } + } + } + + &__message { + margin-bottom: 15px; + + .fa { + margin-right: 5px; + color: $ui-primary-color; + } + } + + &__card { + .detailed-status__display-avatar { + position: relative; + cursor: pointer; + } + + .detailed-status__display-name { + margin-bottom: 0; + text-decoration: none; + + span { + color: $ui-highlight-color; + font-weight: 400; + } + } + } +} diff --git a/app/javascript/flavours/glitch/styles/metadata.scss b/app/javascript/flavours/glitch/styles/metadata.scss new file mode 100644 index 000000000..484410bef --- /dev/null +++ b/app/javascript/flavours/glitch/styles/metadata.scss @@ -0,0 +1,43 @@ +.metadata { + $meta-table-border: lighten($ui-base-color, 8%); + + border-collapse: collapse; + padding: 0; + margin: 15px -15px -15px -15px; + border: 0 none; + border-top: 1px solid $meta-table-border; + border-bottom: 1px solid $meta-table-border; + + td, th { + padding: 15px; + border: 0 none; + border-bottom: 1px solid $meta-table-border; + vertical-align: middle; + } + + tr:last-child { + td, th { + border-bottom: 0 none; + } + } + + td { + color: $ui-primary-color; + text-align: center; + width:100%; + padding-left: 0; + } + + th { + padding-left: 15px; + font-weight: bold; + text-align: center; + width: 94px; + color: $ui-secondary-color; + background: darken($ui-base-color, 8%); + } + + a { + color: $classic-highlight-color; + } +} diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss new file mode 100644 index 000000000..a17476ccb --- /dev/null +++ b/app/javascript/flavours/glitch/styles/modal.scss @@ -0,0 +1,20 @@ +.modal-layout { + background: $ui-base-color url('~images/wave-modal.png') repeat-x bottom fixed; + display: flex; + flex-direction: column; + height: 100vh; + padding: 0; +} + +.modal-layout__mastodon { + display: flex; + flex: 1; + flex-direction: column; + justify-content: flex-end; + + > * { + flex: 1; + max-height: 235px; + background: url('~images/mastodon-ui.png') no-repeat left bottom / contain; + } +} diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index f4c566936..77420c84b 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -8,7 +8,7 @@ body.rtl { } .compose-form .compose-form__buttons-wrapper .character-counter__wrapper { - margin-right: 0px; + margin-right: 0; margin-left: 4px; } diff --git a/app/javascript/flavours/glitch/styles/stream_entries.scss b/app/javascript/flavours/glitch/styles/stream_entries.scss index 453070b7c..343e3591f 100644 --- a/app/javascript/flavours/glitch/styles/stream_entries.scss +++ b/app/javascript/flavours/glitch/styles/stream_entries.scss @@ -93,16 +93,22 @@ .status__avatar { position: absolute; + left: 14px; + top: 14px; + width: 48px; + height: 48px; @include avatar-size(48px); - margin-left: -62px; & > div { + width: 48px; + height: 48px; @include avatar-size(48px); } img { - @include avatar-radius(); display: block; + border-radius: 4px; + @include avatar-radius(); } } @@ -116,6 +122,12 @@ strong { font-weight: 500; color: $ui-base-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } span { @@ -167,6 +179,12 @@ strong { font-weight: 500; color: $ui-base-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } span { @@ -177,11 +195,14 @@ } .avatar { + width: 48px; + height: 48px; @include avatar-size(48px); img { - @include avatar-radius(); display: block; + border-radius: 4px; + @include avatar-radius(); } } diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index ad46f5f9f..92870e679 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/tables.scss @@ -40,6 +40,12 @@ strong { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } &.inline-table > tbody > tr:nth-child(odd) > td, diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index f42d9c8c5..e8e2bc9e3 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -28,6 +28,9 @@ $ui-primary-color: $classic-primary-color !default; // Lighter $ui-secondary-color: $classic-secondary-color !default; // Lightest $ui-highlight-color: $classic-highlight-color !default; // Vibrant +// Language codes that uses CJK fonts +$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; + // Avatar border size (8% default, 100% for rounded avatars) $ui-avatar-border-size: 8%; |